← Back to Editor

#020C1A · #02404F · #488270 · #A4A88A · #E6D0A1

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#020C1A

Indigo · Black · Deep Sea Blue

HEX
#020C1A
RGB
rgb(2, 12, 26)
HSL
hsl(215, 86%, 5%)
HSB
hsb(215, 92%, 10%)
CMYK
cmyk(92%, 54%, 0%, 90%)
Oklch
oklch(15.2% 0.036 251.7)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#02404F

Lake Blue · DarkSlateGray · Peacock Green

HEX
#02404F
RGB
rgb(2, 64, 79)
HSL
hsl(192, 95%, 16%)
HSB
hsb(192, 97%, 31%)
CMYK
cmyk(97%, 19%, 0%, 69%)
Oklch
oklch(34.4% 0.062 220.1)

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

#488270

Mineral Blue · SeaGreen · Mint Ice

HEX
#488270
RGB
rgb(72, 130, 112)
HSL
hsl(161, 29%, 40%)
HSB
hsb(161, 45%, 51%)
CMYK
cmyk(45%, 0%, 14%, 49%)
Oklch
oklch(56.1% 0.068 171.7)

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

#A4A88A

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A4A88A
RGB
rgb(164, 168, 138)
HSL
hsl(68, 15%, 60%)
HSB
hsb(68, 18%, 66%)
CMYK
cmyk(2%, 0%, 18%, 34%)
Oklch
oklch(72.0% 0.042 113.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#E6D0A1

Goose Yellow · Wheat · Lemon Cream

HEX
#E6D0A1
RGB
rgb(230, 208, 161)
HSL
hsl(41, 58%, 77%)
HSB
hsb(41, 30%, 90%)
CMYK
cmyk(0%, 10%, 30%, 10%)
Oklch
oklch(86.4% 0.066 85.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

020C1A
180F02

Analogous

021618
020C1A
040218

Triadic

020C1A
18020B
0B1802

Split-Comp.

020C1A
180402
161802

Tetradic

020C1A
180216
180F02
021804

Contrast Matrix WCAG 2.1 Contrast

020C1A
02404F
488270
A4A88A
E6D0A1
—
1.7
Fail
4.4
AA Large
8.0
AAA
13.0
AAA
1.7
Fail
—
2.5
Fail
4.6
AA
7.5
AAA
4.4
AA Large
2.5
Fail
—
1.8
Fail
3.0
Fail
8.0
AAA
4.6
AA
1.8
Fail
—
1.6
Fail
13.0
AAA
7.5
AAA
3.0
Fail
1.6
Fail
—
White BG
19.6AAA
11.4AAA
4.5AA Large
2.5Fail
1.5Fail
Black BG
1.1Fail
1.8Fail
4.7AA
8.5AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

060617
1D1D4B
616274
A6A691
DCDCAC

Deuteranopia

060516
19154B
5E5975
A6A593
DEDFAF

Tritanopia

031413
054948
4B7879
A49798
E5B5B7

Achromatopsia

0B0B0B
2F2F2F
6F6F6F
A3A3A3
D1D1D1

Shades & Tints Shades & Tints

#020C1A

Dark
Light

#02404F

Dark
Light

#488270

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #020c1a;
  --color-2: #02404f;
  --color-3: #488270;
  --color-4: #a4a88a;
  --color-5: #e6d0a1;
}

SCSS

$color-1: #020c1a;
$color-2: #02404f;
$color-3: #488270;
$color-4: #a4a88a;
$color-5: #e6d0a1;

TAILWIND

colors: {
  'brand-1': '#020c1a',
  'brand-2': '#02404f',
  'brand-3': '#488270',
  'brand-4': '#a4a88a',
  'brand-5': '#e6d0a1',
}

RGB Array

[2, 12, 26], [2, 64, 79], [72, 130, 112], [164, 168, 138], [230, 208, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #020C1A, #02404F, #488270, #A4A88A, #E6D0A1 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #020c1a; --color-2: #02404f; --color-3: #488270; --color-4: #a4a88a; --color-5: #e6d0a1. 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 tech, SaaS, healthcare, eco industries. 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