← Back to Editor

#CDD4BC · #C8C49A · #EDD559 · #6F252A · #3F3C3D

A 5-color palette 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

#CDD4BC

Willow Green · LightGray · Apple Green

HEX
#CDD4BC
RGB
rgb(205, 212, 188)
HSL
hsl(78, 22%, 78%)
HSB
hsb(78, 11%, 83%)
CMYK
cmyk(3%, 0%, 11%, 17%)
Oklch
oklch(85.8% 0.033 120.3)

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

#C8C49A

Fresh Green · Tan · Sunflower

HEX
#C8C49A
RGB
rgb(200, 196, 154)
HSL
hsl(55, 29%, 69%)
HSB
hsb(55, 23%, 78%)
CMYK
cmyk(0%, 2%, 23%, 22%)
Oklch
oklch(81.3% 0.056 103.0)

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

#EDD559

Fresh Green · SandyBrown · Sunflower

HEX
#EDD559
RGB
rgb(237, 213, 89)
HSL
hsl(50, 80%, 64%)
HSB
hsb(50, 62%, 93%)
CMYK
cmyk(0%, 10%, 62%, 7%)
Oklch
oklch(87.0% 0.144 98.3)

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

#6F252A

Crimson · Brown · Wine Red

HEX
#6F252A
RGB
rgb(111, 37, 42)
HSL
hsl(356, 50%, 29%)
HSB
hsb(356, 67%, 44%)
CMYK
cmyk(0%, 67%, 62%, 56%)
Oklch
oklch(37.8% 0.105 19.8)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#3F3C3D

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3F3C3D
RGB
rgb(63, 60, 61)
HSL
hsl(340, 2%, 24%)
HSB
hsb(340, 5%, 25%)
CMYK
cmyk(0%, 5%, 3%, 75%)
Oklch
oklch(36.0% 0.004 354.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDD4BC
C2BBD3

Analogous

D3CEBB
CDD4BC
BFD3BB

Triadic

CDD4BC
BBCCD3
D3BBCC

Split-Comp.

CDD4BC
BBBFD3
CEBBD3

Tetradic

CDD4BC
BBD3CE
C2BBD3
D3BBBF

Contrast Matrix WCAG 2.1 Contrast

CDD4BC
C8C49A
EDD559
6F252A
3F3C3D
—
1.2
Fail
1.0
Fail
7.0
AA
7.1
AAA
1.2
Fail
—
1.2
Fail
6.0
AA
6.1
AA
1.0
Fail
1.2
Fail
—
7.2
AAA
7.4
AAA
7.0
AA
6.0
AA
7.2
AAA
—
1.0
Fail
7.1
AAA
6.1
AA
7.4
AAA
1.0
Fail
—
White BG
1.5Fail
1.8Fail
1.5Fail
10.6AAA
10.9AAA
Black BG
13.7AAA
11.8AAA
14.3AAA
2.0Fail
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0C2
C6C6A4
E3E277
4F4E29
3E3E3D

Deuteranopia

D0CFC3
C7C7A7
E4E67E
535929
3E3E3D

Tritanopia

CDC6C7
C8ACAE
EC8F94
6B2828
3F3D3D

Achromatopsia

CFCFCF
C0C0C0
CECECE
3C3C3C
3D3D3D

Shades & Tints Shades & Tints

#CDD4BC

Dark
Light

#C8C49A

Dark
Light

#EDD559

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdd4bc;
  --color-2: #c8c49a;
  --color-3: #edd559;
  --color-4: #6f252a;
  --color-5: #3f3c3d;
}

SCSS

$color-1: #cdd4bc;
$color-2: #c8c49a;
$color-3: #edd559;
$color-4: #6f252a;
$color-5: #3f3c3d;

TAILWIND

colors: {
  'brand-1': '#cdd4bc',
  'brand-2': '#c8c49a',
  'brand-3': '#edd559',
  'brand-4': '#6f252a',
  'brand-5': '#3f3c3d',
}

RGB Array

[205, 212, 188], [200, 196, 154], [237, 213, 89], [111, 37, 42], [63, 60, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDD4BC, #C8C49A, #EDD559, #6F252A, #3F3C3D 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: #cdd4bc; --color-2: #c8c49a; --color-3: #edd559; --color-4: #6f252a; --color-5: #3f3c3d. 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 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