← Back to Editor

#CCCC89 · #BCCC89 · #8A8D87 · #6D5B72 · #DCE6C2

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CCCC89

Fresh Green · Tan · Sunflower

HEX
#CCCC89
RGB
rgb(204, 204, 137)
HSL
hsl(60, 40%, 67%)
HSB
hsb(60, 33%, 80%)
CMYK
cmyk(0%, 0%, 33%, 20%)
Oklch
oklch(83.0% 0.087 108.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#BCCC89

Willow Green · Tan · Apple Green

HEX
#BCCC89
RGB
rgb(188, 204, 137)
HSL
hsl(74, 40%, 67%)
HSB
hsb(74, 33%, 80%)
CMYK
cmyk(8%, 0%, 33%, 20%)
Oklch
oklch(81.7% 0.090 119.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#8A8D87

Ash · Gray · Warm Gray

HEX
#8A8D87
RGB
rgb(138, 141, 135)
HSL
hsl(90, 3%, 54%)
HSB
hsb(90, 4%, 55%)
CMYK
cmyk(2%, 0%, 4%, 45%)
Oklch
oklch(63.9% 0.009 128.6)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#6D5B72

Dark Plum · DimGray · Eggplant

HEX
#6D5B72
RGB
rgb(109, 91, 114)
HSL
hsl(287, 11%, 40%)
HSB
hsb(287, 20%, 45%)
CMYK
cmyk(4%, 20%, 0%, 55%)
Oklch
oklch(49.7% 0.042 318.8)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#DCE6C2

Willow Green · LightGray · Mint Green

HEX
#DCE6C2
RGB
rgb(220, 230, 194)
HSL
hsl(77, 42%, 83%)
HSB
hsb(77, 16%, 90%)
CMYK
cmyk(4%, 0%, 16%, 10%)
Oklch
oklch(90.8% 0.049 120.0)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCCC89
8989CD

Analogous

CDAB89
CCCC89
ABCD89

Triadic

CCCC89
89CDCD
CD89CD

Split-Comp.

CCCC89
89ABCD
AB89CD

Tetradic

CCCC89
89CDAB
8989CD
CD89AB

Contrast Matrix WCAG 2.1 Contrast

CCCC89
BCCC89
8A8D87
6D5B72
DCE6C2
—
1.0
Fail
2.0
Fail
3.7
AA Large
1.3
Fail
1.0
Fail
—
1.9
Fail
3.6
AA Large
1.3
Fail
2.0
Fail
1.9
Fail
—
1.8
Fail
2.6
Fail
3.7
AA Large
3.6
AA Large
1.8
Fail
—
4.8
AA
1.3
Fail
1.3
Fail
2.6
Fail
4.8
AA
—
White BG
1.7Fail
1.7Fail
3.4AA Large
6.2AA
1.3Fail
Black BG
12.6AAA
12.1AAA
6.2AA
3.4AA Large
16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCC99
C3C399
8B8B88
65656C
E0E0CB

Deuteranopia

CCCC9D
C2C19D
8B8B89
66686B
E0DFCD

Tritanopia

CCA6A9
BDA6A9
8A8A8A
6C6867
DDD2D3

Achromatopsia

C4C4C4
C0C0C0
8B8B8B
636363
DFDFDF

Shades & Tints Shades & Tints

#CCCC89

Dark
Light

#BCCC89

Dark
Light

#8A8D87

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cccc89;
  --color-2: #bccc89;
  --color-3: #8a8d87;
  --color-4: #6d5b72;
  --color-5: #dce6c2;
}

SCSS

$color-1: #cccc89;
$color-2: #bccc89;
$color-3: #8a8d87;
$color-4: #6d5b72;
$color-5: #dce6c2;

TAILWIND

colors: {
  'brand-1': '#cccc89',
  'brand-2': '#bccc89',
  'brand-3': '#8a8d87',
  'brand-4': '#6d5b72',
  'brand-5': '#dce6c2',
}

RGB Array

[204, 204, 137], [188, 204, 137], [138, 141, 135], [109, 91, 114], [220, 230, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #CCCC89, #BCCC89, #8A8D87, #6D5B72, #DCE6C2 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cccc89; --color-2: #bccc89; --color-3: #8a8d87; --color-4: #6d5b72; --color-5: #dce6c2. 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. Restrained colors convey professionalism and trust. 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