← Back to Editor

#CCC096 · #D0A467 · #878751 · #59633E · #182329

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CCC096

Ginger · Tan · Sunflower

HEX
#CCC096
RGB
rgb(204, 192, 150)
HSL
hsl(47, 35%, 69%)
HSB
hsb(47, 26%, 80%)
CMYK
cmyk(0%, 6%, 26%, 20%)
Oklch
oklch(80.7% 0.058 94.0)

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

#D0A467

Ginger · DarkSalmon · Warm Sun

HEX
#D0A467
RGB
rgb(208, 164, 103)
HSL
hsl(35, 53%, 61%)
HSB
hsb(35, 50%, 82%)
CMYK
cmyk(0%, 21%, 50%, 18%)
Oklch
oklch(74.6% 0.094 74.6)

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

#878751

Autumn Sage · Gray · Honey Gold

HEX
#878751
RGB
rgb(135, 135, 81)
HSL
hsl(60, 25%, 42%)
HSB
hsb(60, 40%, 53%)
CMYK
cmyk(0%, 0%, 40%, 47%)
Oklch
oklch(61.0% 0.075 108.4)

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

#59633E

Grass Green · DarkOliveGreen · Forest Green

HEX
#59633E
RGB
rgb(89, 99, 62)
HSL
hsl(76, 23%, 32%)
HSB
hsb(76, 37%, 39%)
CMYK
cmyk(10%, 0%, 37%, 61%)
Oklch
oklch(48.1% 0.057 120.9)

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

#182329

Slate Blue · Black · Deep Sea Blue

HEX
#182329
RGB
rgb(24, 35, 41)
HSL
hsl(201, 26%, 13%)
HSB
hsb(201, 41%, 16%)
CMYK
cmyk(41%, 15%, 0%, 84%)
Oklch
oklch(24.8% 0.019 232.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCC096
94A0CC

Analogous

CCA494
CCC096
BCCC94

Triadic

CCC096
94CCC0
C094CC

Split-Comp.

CCC096
94BCCC
A494CC

Tetradic

CCC096
94CCA4
94A0CC
CC94BC

Contrast Matrix WCAG 2.1 Contrast

CCC096
D0A467
878751
59633E
182329
—
1.3
Fail
2.1
Fail
3.5
AA Large
8.8
AAA
1.3
Fail
—
1.6
Fail
2.8
Fail
7.0
AAA
2.1
Fail
1.6
Fail
—
1.7
Fail
4.3
AA Large
3.5
AA Large
2.8
Fail
1.7
Fail
—
2.5
Fail
8.8
AAA
7.0
AAA
4.3
AA Large
2.5
Fail
—
White BG
1.8Fail
2.3Fail
3.7AA Large
6.4AA
16.0AAA
Black BG
11.5AAA
9.2AAA
5.6AA
3.3AA Large
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C7A0
BDBD76
87875E
5D5D47
1D1D28

Deuteranopia

C8C8A3
C0C379
878761
5D5C49
1C1B27

Tritanopia

CBA8AA
CE8184
87686B
5A4E50
192626

Achromatopsia

BFBFBF
AAAAAA
818181
5C5C5C
202020

Shades & Tints Shades & Tints

#CCC096

Dark
Light

#D0A467

Dark
Light

#878751

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccc096;
  --color-2: #d0a467;
  --color-3: #878751;
  --color-4: #59633e;
  --color-5: #182329;
}

SCSS

$color-1: #ccc096;
$color-2: #d0a467;
$color-3: #878751;
$color-4: #59633e;
$color-5: #182329;

TAILWIND

colors: {
  'brand-1': '#ccc096',
  'brand-2': '#d0a467',
  'brand-3': '#878751',
  'brand-4': '#59633e',
  'brand-5': '#182329',
}

RGB Array

[204, 192, 150], [208, 164, 103], [135, 135, 81], [89, 99, 62], [24, 35, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #CCC096, #D0A467, #878751, #59633E, #182329 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: #ccc096; --color-2: #d0a467; --color-3: #878751; --color-4: #59633e; --color-5: #182329. 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 warm-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