← Back to Editor

#122C55 · #DAAF78 · #F2D017 · #F4E196 · #F6FAE3

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

#122C55

Indigo · MidnightBlue · Deep Sea Blue

HEX
#122C55
RGB
rgb(18, 44, 85)
HSL
hsl(217, 65%, 20%)
HSB
hsb(217, 79%, 33%)
CMYK
cmyk(79%, 48%, 0%, 67%)
Oklch
oklch(29.8% 0.081 259.2)

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

#DAAF78

Ginger · BurlyWood · Warm Sun

HEX
#DAAF78
RGB
rgb(218, 175, 120)
HSL
hsl(34, 57%, 66%)
HSB
hsb(34, 45%, 85%)
CMYK
cmyk(0%, 20%, 45%, 15%)
Oklch
oklch(78.0% 0.087 72.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#F2D017

Autumn Sage · Gold · Sunflower

HEX
#F2D017
RGB
rgb(242, 208, 23)
HSL
hsl(51, 89%, 52%)
HSB
hsb(51, 90%, 95%)
CMYK
cmyk(0%, 14%, 90%, 5%)
Oklch
oklch(86.1% 0.174 96.8)

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

#F4E196

Goose Yellow · Khaki · Lemon Cream

HEX
#F4E196
RGB
rgb(244, 225, 150)
HSL
hsl(48, 81%, 77%)
HSB
hsb(48, 39%, 96%)
CMYK
cmyk(0%, 8%, 39%, 4%)
Oklch
oklch(90.8% 0.097 95.6)

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

#F6FAE3

Willow Green · Beige · Mint Green

HEX
#F6FAE3
RGB
rgb(246, 250, 227)
HSL
hsl(70, 70%, 94%)
HSB
hsb(70, 9%, 98%)
CMYK
cmyk(2%, 0%, 9%, 2%)
Oklch
oklch(97.6% 0.030 115.0)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

122C55
543B12

Analogous

124C54
122C55
1A1254

Triadic

122C55
54122B
2B5412

Split-Comp.

122C55
541A12
4C5412

Tetradic

122C55
54124C
543B12
12541A

Contrast Matrix WCAG 2.1 Contrast

122C55
DAAF78
F2D017
F4E196
F6FAE3
—
6.8
AA
9.1
AAA
10.6
AAA
13.0
AAA
6.8
AA
—
1.3
Fail
1.5
Fail
1.9
Fail
9.1
AAA
1.3
Fail
—
1.2
Fail
1.4
Fail
10.6
AAA
1.5
Fail
1.2
Fail
—
1.2
Fail
13.0
AAA
1.9
Fail
1.4
Fail
1.2
Fail
—
White BG
13.8AAA
2.0Fail
1.5Fail
1.3Fail
1.1Fail
Black BG
1.5Fail
10.4AAA
13.8AAA
16.1AAA
19.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1D1D4B
C7C785
E3E344
ECECA8
F8F8E9

Deuteranopia

1C1A49
CACD89
E5E84F
EDEEAD
F8F7EA

Tritanopia

134342
D89092
F0676F
F3B6BA
F6EDEE

Achromatopsia

292929
B6B6B6
C5C5C5
DEDEDE
F6F6F6

Shades & Tints Shades & Tints

#122C55

Dark
Light

#DAAF78

Dark
Light

#F2D017

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #122c55;
  --color-2: #daaf78;
  --color-3: #f2d017;
  --color-4: #f4e196;
  --color-5: #f6fae3;
}

SCSS

$color-1: #122c55;
$color-2: #daaf78;
$color-3: #f2d017;
$color-4: #f4e196;
$color-5: #f6fae3;

TAILWIND

colors: {
  'brand-1': '#122c55',
  'brand-2': '#daaf78',
  'brand-3': '#f2d017',
  'brand-4': '#f4e196',
  'brand-5': '#f6fae3',
}

RGB Array

[18, 44, 85], [218, 175, 120], [242, 208, 23], [244, 225, 150], [246, 250, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #122C55, #DAAF78, #F2D017, #F4E196, #F6FAE3 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #122c55; --color-2: #daaf78; --color-3: #f2d017; --color-4: #f4e196; --color-5: #f6fae3. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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