← Back to Editor

#021F23 · #4680A0 · #D28D01 · #1F9C83 · #A18470

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#021F23

Lake Blue · Black · Peacock Green

HEX
#021F23
RGB
rgb(2, 31, 35)
HSL
hsl(187, 89%, 7%)
HSB
hsb(187, 94%, 14%)
CMYK
cmyk(94%, 11%, 0%, 86%)
Oklch
oklch(22.0% 0.035 207.7)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#4680A0

Slate Blue · SteelBlue · Navy Blue

HEX
#4680A0
RGB
rgb(70, 128, 160)
HSL
hsl(201, 39%, 45%)
HSB
hsb(201, 56%, 63%)
CMYK
cmyk(56%, 20%, 0%, 37%)
Oklch
oklch(57.4% 0.078 234.6)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#D28D01

Ochre · DarkGoldenRod · Honey Gold

HEX
#D28D01
RGB
rgb(210, 141, 1)
HSL
hsl(40, 99%, 41%)
HSB
hsb(40, 100%, 82%)
CMYK
cmyk(0%, 33%, 100%, 18%)
Oklch
oklch(69.6% 0.147 74.3)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#1F9C83

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#1F9C83
RGB
rgb(31, 156, 131)
HSL
hsl(168, 67%, 37%)
HSB
hsb(168, 80%, 61%)
CMYK
cmyk(80%, 0%, 16%, 39%)
Oklch
oklch(62.2% 0.110 175.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#A18470

Tangerine · Gray · Warm Sun

HEX
#A18470
RGB
rgb(161, 132, 112)
HSL
hsl(24, 21%, 54%)
HSB
hsb(24, 30%, 63%)
CMYK
cmyk(0%, 18%, 30%, 37%)
Oklch
oklch(63.5% 0.046 56.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

021F23
220602

Analogous

022216
021F23
020E22

Triadic

021F23
22021E
1E2202

Split-Comp.

021F23
22020E
221602

Tetradic

021F23
160222
220602
0E2202

Contrast Matrix WCAG 2.1 Contrast

021F23
4680A0
D28D01
1F9C83
A18470
—
4.0
AA Large
6.2
AA
5.0
AA
4.9
AA
4.0
AA Large
—
1.6
Fail
1.3
Fail
1.2
Fail
6.2
AA
1.6
Fail
—
1.2
Fail
1.2
Fail
5.0
AA
1.3
Fail
1.2
Fail
—
1.0
Fail
4.9
AA
1.2
Fail
1.2
Fail
1.0
Fail
—
White BG
17.2AAA
4.3AA Large
2.8Fail
3.4AA Large
3.5AA Large
Black BG
1.2Fail
4.9AA
7.6AAA
6.1AA
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0F0F22
5F6098
B4B423
555689
949475

Deuteranopia

0D0B22
5C5796
B8BD2B
4E458B
969876

Tritanopia

032121
499291
CF3E44
258E8F
A0797A

Achromatopsia

171717
727272
929292
747474
8A8A8A

Shades & Tints Shades & Tints

#021F23

Dark
Light

#4680A0

Dark
Light

#D28D01

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #021f23;
  --color-2: #4680a0;
  --color-3: #d28d01;
  --color-4: #1f9c83;
  --color-5: #a18470;
}

SCSS

$color-1: #021f23;
$color-2: #4680a0;
$color-3: #d28d01;
$color-4: #1f9c83;
$color-5: #a18470;

TAILWIND

colors: {
  'brand-1': '#021f23',
  'brand-2': '#4680a0',
  'brand-3': '#d28d01',
  'brand-4': '#1f9c83',
  'brand-5': '#a18470',
}

RGB Array

[2, 31, 35], [70, 128, 160], [210, 141, 1], [31, 156, 131], [161, 132, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #021F23, #4680A0, #D28D01, #1F9C83, #A18470 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #021f23; --color-2: #4680a0; --color-3: #d28d01; --color-4: #1f9c83; --color-5: #a18470. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color