← Back to Editor

#CCB069 · #DE3B2C · #DDAD87 · #A39406 · #565133

cool

A 5-color cool palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CCB069

Ginger · Tan · Sunflower

HEX
#CCB069
RGB
rgb(204, 176, 105)
HSL
hsl(43, 49%, 61%)
HSB
hsb(43, 49%, 80%)
CMYK
cmyk(0%, 14%, 49%, 20%)
Oklch
oklch(76.6% 0.096 88.6)

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

#DE3B2C

Vermilion · Crimson · Passion Red

HEX
#DE3B2C
RGB
rgb(222, 59, 44)
HSL
hsl(5, 73%, 52%)
HSB
hsb(5, 80%, 87%)
CMYK
cmyk(0%, 73%, 80%, 13%)
Oklch
oklch(59.7% 0.202 29.6)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#DDAD87

Apricot · BurlyWood · Warm Sun

HEX
#DDAD87
RGB
rgb(221, 173, 135)
HSL
hsl(27, 56%, 70%)
HSB
hsb(27, 39%, 87%)
CMYK
cmyk(0%, 22%, 39%, 13%)
Oklch
oklch(78.2% 0.076 59.7)

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

#A39406

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#A39406
RGB
rgb(163, 148, 6)
HSL
hsl(54, 93%, 33%)
HSB
hsb(54, 96%, 64%)
CMYK
cmyk(0%, 9%, 96%, 36%)
Oklch
oklch(65.9% 0.137 102.1)

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

#565133

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#565133
RGB
rgb(86, 81, 51)
HSL
hsl(51, 26%, 27%)
HSB
hsb(51, 41%, 34%)
CMYK
cmyk(0%, 6%, 41%, 66%)
Oklch
oklch(43.2% 0.046 99.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCB069
6B86CC

Analogous

CC806B
CCB069
B7CC6B

Triadic

CCB069
6BCCB1
B16BCC

Split-Comp.

CCB069
6BB7CC
806BCC

Tetradic

CCB069
6BCC80
6B86CC
CC6BB7

Contrast Matrix WCAG 2.1 Contrast

CCB069
DE3B2C
DDAD87
A39406
565133
—
2.1
Fail
1.0
Fail
1.5
Fail
3.8
AA Large
2.1
Fail
—
2.2
Fail
1.4
Fail
1.8
Fail
1.0
Fail
2.2
Fail
—
1.5
Fail
4.0
AA Large
1.5
Fail
1.4
Fail
1.5
Fail
—
2.6
Fail
3.8
AA Large
1.8
Fail
4.0
AA Large
2.6
Fail
—
White BG
2.1Fail
4.4AA Large
2.0Fail
3.1AA Large
8.0AAA
Black BG
10.0AAA
4.8AA
10.4AAA
6.8AA
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C07A
979630
C8C890
9D9C28
54543A

Deuteranopia

C2C47E
A1AD31
CBCF92
9D9F31
54553C

Tritanopia

CB888B
D63233
DB9799
A24349
564041

Achromatopsia

B0B0B0
6A6A6A
B7B7B7
888888
4F4F4F

Shades & Tints Shades & Tints

#CCB069

Dark
Light

#DE3B2C

Dark
Light

#DDAD87

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccb069;
  --color-2: #de3b2c;
  --color-3: #ddad87;
  --color-4: #a39406;
  --color-5: #565133;
}

SCSS

$color-1: #ccb069;
$color-2: #de3b2c;
$color-3: #ddad87;
$color-4: #a39406;
$color-5: #565133;

TAILWIND

colors: {
  'brand-1': '#ccb069',
  'brand-2': '#de3b2c',
  'brand-3': '#ddad87',
  'brand-4': '#a39406',
  'brand-5': '#565133',
}

RGB Array

[204, 176, 105], [222, 59, 44], [221, 173, 135], [163, 148, 6], [86, 81, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #CCB069, #DE3B2C, #DDAD87, #A39406, #565133 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #ccb069; --color-2: #de3b2c; --color-3: #ddad87; --color-4: #a39406; --color-5: #565133. 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 cool-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