← Back to Editor

#424D09 · #DEBD7A · #302720 · #9E8308 · #16665E

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

#424D09

Grass Green · DarkOliveGreen · Dark Green

HEX
#424D09
RGB
rgb(66, 77, 9)
HSL
hsl(70, 79%, 17%)
HSB
hsb(70, 88%, 30%)
CMYK
cmyk(14%, 0%, 88%, 70%)
Oklch
oklch(39.7% 0.088 119.0)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

#DEBD7A

Ginger · BurlyWood · Sunflower

HEX
#DEBD7A
RGB
rgb(222, 189, 122)
HSL
hsl(40, 60%, 67%)
HSB
hsb(40, 45%, 87%)
CMYK
cmyk(0%, 15%, 45%, 13%)
Oklch
oklch(81.2% 0.093 84.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#302720

Tangerine · DarkSlateGray · Cinnamon

HEX
#302720
RGB
rgb(48, 39, 32)
HSL
hsl(26, 20%, 16%)
HSB
hsb(26, 33%, 19%)
CMYK
cmyk(0%, 19%, 33%, 81%)
Oklch
oklch(28.1% 0.018 59.8)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#9E8308

Ochre · DarkGoldenRod · Honey Gold

HEX
#9E8308
RGB
rgb(158, 131, 8)
HSL
hsl(49, 90%, 33%)
HSB
hsb(49, 95%, 62%)
CMYK
cmyk(0%, 17%, 95%, 38%)
Oklch
oklch(61.7% 0.125 94.1)

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

#16665E

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#16665E
RGB
rgb(22, 102, 94)
HSL
hsl(174, 65%, 24%)
HSB
hsb(174, 78%, 40%)
CMYK
cmyk(78%, 0%, 8%, 60%)
Oklch
oklch(46.2% 0.074 184.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

424D09
15094E

Analogous

4E3709
424D09
204E09

Triadic

424D09
09424E
4E0942

Split-Comp.

424D09
09204E
37094E

Tetradic

424D09
094E37
15094E
4E0920

Contrast Matrix WCAG 2.1 Contrast

424D09
DEBD7A
302720
9E8308
16665E
—
5.1
AA
1.6
Fail
2.5
Fail
1.3
Fail
5.1
AA
—
8.1
AAA
2.0
Fail
3.8
AA Large
1.6
Fail
8.1
AAA
—
4.0
AA Large
2.2
Fail
2.5
Fail
2.0
Fail
4.0
AA Large
—
1.8
Fail
1.3
Fail
3.8
AA Large
2.2
Fail
1.8
Fail
—
White BG
9.1AAA
1.8Fail
14.6AAA
3.7AA Large
6.8AA
Black BG
2.3Fail
11.7AAA
1.4Fail
5.7AA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

474719
D0CF8A
2C2C22
929226
393960

Deuteranopia

46451D
D2D48E
2D2D22
94962D
342E60

Tritanopia

432629
DC979A
302323
9D3D42
1A6162

Achromatopsia

424242
BFBFBF
292929
7D7D7D
4D4D4D

Shades & Tints Shades & Tints

#424D09

Dark
Light

#DEBD7A

Dark
Light

#302720

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #424d09;
  --color-2: #debd7a;
  --color-3: #302720;
  --color-4: #9e8308;
  --color-5: #16665e;
}

SCSS

$color-1: #424d09;
$color-2: #debd7a;
$color-3: #302720;
$color-4: #9e8308;
$color-5: #16665e;

TAILWIND

colors: {
  'brand-1': '#424d09',
  'brand-2': '#debd7a',
  'brand-3': '#302720',
  'brand-4': '#9e8308',
  'brand-5': '#16665e',
}

RGB Array

[66, 77, 9], [222, 189, 122], [48, 39, 32], [158, 131, 8], [22, 102, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #424D09, #DEBD7A, #302720, #9E8308, #16665E 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: #424d09; --color-2: #debd7a; --color-3: #302720; --color-4: #9e8308; --color-5: #16665e. 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