#FFDF31 + #CEB940 + #9C924F + #6B6C5E + #39456D · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FFDF31

Autumn Sage · Gold · Sunflower

HEX

#FFDF31

RGB

rgb(255, 223, 49)

HSL

hsl(51, 100%, 60%)

HSB

hsb(51, 81%, 100%)

CMYK

cmyk(0%, 13%, 81%, 0%)

Oklch

oklch(90.4% 0.176 97.8)

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

#CEB940

Autumn Sage · GoldenRod · Sunflower

HEX

#CEB940

RGB

rgb(206, 185, 64)

HSL

hsl(51, 59%, 53%)

HSB

hsb(51, 69%, 81%)

CMYK

cmyk(0%, 10%, 69%, 19%)

Oklch

oklch(78.2% 0.139 99.2)

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

#9C924F

Autumn Sage · Gray · Honey Gold

HEX

#9C924F

RGB

rgb(156, 146, 79)

HSL

hsl(52, 33%, 46%)

HSB

hsb(52, 49%, 61%)

CMYK

cmyk(0%, 6%, 49%, 39%)

Oklch

oklch(65.4% 0.089 100.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#6B6C5E

Ink Gray · DimGray · Charcoal

HEX

#6B6C5E

RGB

rgb(107, 108, 94)

HSL

hsl(64, 7%, 40%)

HSB

hsb(64, 13%, 42%)

CMYK

cmyk(1%, 0%, 13%, 58%)

Oklch

oklch(52.6% 0.021 110.4)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#39456D

Indigo · DarkSlateGray · Prussian Blue

HEX

#39456D

RGB

rgb(57, 69, 109)

HSL

hsl(226, 31%, 33%)

HSB

hsb(226, 48%, 43%)

CMYK

cmyk(48%, 37%, 0%, 57%)

Oklch

oklch(39.9% 0.070 270.3)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFDF31

3352FF

Analogous

FF7A33

FFDF31

B8FF33

Triadic

FFDF31

33FFE0

E033FF

Split-Comp.

FFDF31

33B8FF

7A33FF

Tetradic

FFDF31

33FF7A

3352FF

FF33B8

Contrast Matrix WCAG 2.1 Contrast

FFDF31	CEB940	9C924F	6B6C5E	39456D
—	1.5 Fail	2.4 Fail	4.0 AA Large	7.1 AAA
1.5 Fail	—	1.6 Fail	2.7 Fail	4.7 AA
2.4 Fail	1.6 Fail	—	1.7 Fail	3.0 Fail
4.0 AA Large	2.7 Fail	1.7 Fail	—	1.8 Fail
7.1 AAA	4.7 AA	3.0 Fail	1.8 Fail	—

White BG

1.3Fail

2.0Fail

3.2AA Large

5.3AA

9.3AAA

Black BG

15.9AAA

10.6AAA

6.6AA

3.9AA Large

2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F15B

C5C55D

98985F

6B6B61

3E3E63

Deuteranopia

F3F565

C6C864

989963

6B6B62

3E3D61

Tritanopia

FD7C84

CD7479

9C6C6F

6B6465

3A5C5A

Achromatopsia

D5D5D5

B1B1B1

8D8D8D

6A6A6A

464646

Shades & Tints Shades & Tints

#FFDF31

Dark

Light

#CEB940

Dark

Light

#9C924F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffdf31;
  --color-2: #ceb940;
  --color-3: #9c924f;
  --color-4: #6b6c5e;
  --color-5: #39456d;
}

SCSS

$color-1: #ffdf31;
$color-2: #ceb940;
$color-3: #9c924f;
$color-4: #6b6c5e;
$color-5: #39456d;

TAILWIND

colors: {
  'brand-1': '#ffdf31',
  'brand-2': '#ceb940',
  'brand-3': '#9c924f',
  'brand-4': '#6b6c5e',
  'brand-5': '#39456d',
}

RGB Array

[255, 223, 49], [206, 185, 64], [156, 146, 79], [107, 108, 94], [57, 69, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #FFDF31, #CEB940, #9C924F, #6B6C5E, #39456D is ideal for: corporate websites, product showcases, portfolios. 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: #ffdf31; --color-2: #ceb940; --color-3: #9c924f; --color-4: #6b6c5e; --color-5: #39456d. 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. 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 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