← Back to Editor

#F8CC8A · #D90453 · #51445F · #002E66 · #120A31

dark

A 5-color dark 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

#F8CC8A

Goose Yellow · Khaki · Peach Orange

HEX
#F8CC8A
RGB
rgb(248, 204, 138)
HSL
hsl(36, 89%, 76%)
HSB
hsb(36, 44%, 97%)
CMYK
cmyk(0%, 18%, 44%, 3%)
Oklch
oklch(86.9% 0.097 77.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#D90453

Dark Violet · Crimson · Camellia

HEX
#D90453
RGB
rgb(217, 4, 83)
HSL
hsl(338, 96%, 43%)
HSB
hsb(338, 98%, 85%)
CMYK
cmyk(0%, 98%, 62%, 15%)
Oklch
oklch(56.6% 0.225 11.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#51445F

Deep Indigo · DarkSlateGray · Eggplant

HEX
#51445F
RGB
rgb(81, 68, 95)
HSL
hsl(269, 17%, 32%)
HSB
hsb(269, 28%, 37%)
CMYK
cmyk(15%, 28%, 0%, 63%)
Oklch
oklch(41.1% 0.047 306.4)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#002E66

Indigo · MidnightBlue · Deep Sea Blue

HEX
#002E66
RGB
rgb(0, 46, 102)
HSL
hsl(213, 100%, 20%)
HSB
hsb(213, 100%, 40%)
CMYK
cmyk(100%, 55%, 0%, 60%)
Oklch
oklch(31.1% 0.109 256.7)

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

#120A31

Deep Indigo · Black · Deep Sea Blue

HEX
#120A31
RGB
rgb(18, 10, 49)
HSL
hsl(252, 66%, 12%)
HSB
hsb(252, 80%, 19%)
CMYK
cmyk(63%, 80%, 0%, 81%)
Oklch
oklch(18.6% 0.073 286.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8CC8A
8BB7F8

Analogous

F8968B
F8CC8A
EDF88B

Triadic

F8CC8A
8BF8CD
CD8BF8

Split-Comp.

F8CC8A
8BEDF8
968BF8

Tetradic

F8CC8A
8BF896
8BB7F8
F88BED

Contrast Matrix WCAG 2.1 Contrast

F8CC8A
D90453
51445F
002E66
120A31
—
3.4
AA Large
6.0
AA
8.8
AAA
12.6
AAA
3.4
AA Large
—
1.7
Fail
2.6
Fail
3.7
AA Large
6.0
AA
1.7
Fail
—
1.5
Fail
2.1
Fail
8.8
AAA
2.6
Fail
1.5
Fail
—
1.4
Fail
12.6
AAA
3.7
AA Large
2.1
Fail
1.4
Fail
—
White BG
1.5Fail
5.1AA
9.0AAA
13.3AAA
18.9AAA
Black BG
14.0AAA
4.1AA Large
2.3Fail
1.6Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E59A
7D7B40
4B4B58
141458
0F0E28

Deuteranopia

E8EB9E
89993B
4C4D57
110E55
0F1025

Tritanopia

F6A7A9
CE312D
505352
024E4B
12201E

Achromatopsia

D2D2D2
4D4D4D
4B4B4B
272727
111111

Shades & Tints Shades & Tints

#F8CC8A

Dark
Light

#D90453

Dark
Light

#51445F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8cc8a;
  --color-2: #d90453;
  --color-3: #51445f;
  --color-4: #002e66;
  --color-5: #120a31;
}

SCSS

$color-1: #f8cc8a;
$color-2: #d90453;
$color-3: #51445f;
$color-4: #002e66;
$color-5: #120a31;

TAILWIND

colors: {
  'brand-1': '#f8cc8a',
  'brand-2': '#d90453',
  'brand-3': '#51445f',
  'brand-4': '#002e66',
  'brand-5': '#120a31',
}

RGB Array

[248, 204, 138], [217, 4, 83], [81, 68, 95], [0, 46, 102], [18, 10, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #F8CC8A, #D90453, #51445F, #002E66, #120A31 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: #f8cc8a; --color-2: #d90453; --color-3: #51445f; --color-4: #002e66; --color-5: #120a31. 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 dark-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