#CCA000 + #968F0B + #636054 + #404966 + #302F52 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CCA000

Ochre · DarkGoldenRod · Honey Gold

HEX

#CCA000

RGB

rgb(204, 160, 0)

HSL

hsl(47, 100%, 40%)

HSB

hsb(47, 100%, 80%)

CMYK

cmyk(0%, 22%, 100%, 20%)

Oklch

oklch(72.6% 0.148 88.8)

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

#968F0B

Autumn Sage · Olive · Honey Gold

HEX

#968F0B

RGB

rgb(150, 143, 11)

HSL

hsl(57, 86%, 32%)

HSB

hsb(57, 93%, 59%)

CMYK

cmyk(0%, 5%, 93%, 41%)

Oklch

oklch(63.6% 0.133 106.1)

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

#636054

Ochre · DimGray · Charcoal

HEX

#636054

RGB

rgb(99, 96, 84)

HSL

hsl(48, 8%, 36%)

HSB

hsb(48, 15%, 39%)

CMYK

cmyk(0%, 3%, 15%, 61%)

Oklch

oklch(48.8% 0.019 95.4)

Traditional「Ochre」· Paint「Charcoal」· Creative Midnight Shadow

#404966

Indigo · DarkSlateGray · Prussian Blue

HEX

#404966

RGB

rgb(64, 73, 102)

HSL

hsl(226, 23%, 33%)

HSB

hsb(226, 37%, 40%)

CMYK

cmyk(37%, 28%, 0%, 60%)

Oklch

oklch(41.0% 0.050 270.8)

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

#302F52

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#302F52

RGB

rgb(48, 47, 82)

HSL

hsl(242, 27%, 25%)

HSB

hsb(242, 43%, 32%)

CMYK

cmyk(41%, 43%, 0%, 68%)

Oklch

oklch(32.4% 0.061 283.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCA000

002CCC

Analogous

CC3A00

CCA000

92CC00

Triadic

CCA000

00CCA0

A000CC

Split-Comp.

CCA000

0092CC

3A00CC

Tetradic

CCA000

00CC3A

002CCC

CC0092

Contrast Matrix WCAG 2.1 Contrast

CCA000	968F0B	636054	404966	302F52
—	1.4 Fail	2.6 Fail	3.6 AA Large	5.2 AA
1.4 Fail	—	1.9 Fail	2.6 Fail	3.8 AA Large
2.6 Fail	1.9 Fail	—	1.4 Fail	2.0 Fail
3.6 AA Large	2.6 Fail	1.4 Fail	—	1.4 Fail
5.2 AA	3.8 AA Large	2.0 Fail	1.4 Fail	—

White BG

2.4Fail

3.4AA Large

6.3AA

8.9AAA

12.7AAA

Black BG

8.6AAA

6.2AA

3.3AA Large

2.4Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B927

93932B

626257

44445F

30304A

Deuteranopia

BCBF30

939433

626258

43435D

303048

Tritanopia

CA454C

96444A

63595A

405958

304341

Achromatopsia

9B9B9B

828282

606060

4A4A4A

333333

Shades & Tints Shades & Tints

#CCA000

Dark

Light

#968F0B

Dark

Light

#636054

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cca000;
  --color-2: #968f0b;
  --color-3: #636054;
  --color-4: #404966;
  --color-5: #302f52;
}

SCSS

$color-1: #cca000;
$color-2: #968f0b;
$color-3: #636054;
$color-4: #404966;
$color-5: #302f52;

TAILWIND

colors: {
  'brand-1': '#cca000',
  'brand-2': '#968f0b',
  'brand-3': '#636054',
  'brand-4': '#404966',
  'brand-5': '#302f52',
}

RGB Array

[204, 160, 0], [150, 143, 11], [99, 96, 84], [64, 73, 102], [48, 47, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCA000, #968F0B, #636054, #404966, #302F52 is ideal for: tech websites, dark mode UIs, game UIs. 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: #cca000; --color-2: #968f0b; --color-3: #636054; --color-4: #404966; --color-5: #302f52. 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. 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