← Back to Editor

#D4D6CB · #CADBC9 · #C7C6B1 · #695E4C · #402D3B

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

#D4D6CB

Willow Green · LightGray · Mint Green

HEX
#D4D6CB
RGB
rgb(212, 214, 203)
HSL
hsl(71, 12%, 82%)
HSB
hsb(71, 5%, 84%)
CMYK
cmyk(1%, 0%, 5%, 16%)
Oklch
oklch(87.1% 0.015 115.1)

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

#CADBC9

Celadon · LightGray · Mint Green

HEX
#CADBC9
RGB
rgb(202, 219, 201)
HSL
hsl(117, 20%, 82%)
HSB
hsb(117, 8%, 86%)
CMYK
cmyk(8%, 0%, 8%, 14%)
Oklch
oklch(87.4% 0.030 143.8)

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

#C7C6B1

Fresh Green · Silver · Sunflower

HEX
#C7C6B1
RGB
rgb(199, 198, 177)
HSL
hsl(57, 16%, 74%)
HSB
hsb(57, 11%, 78%)
CMYK
cmyk(0%, 1%, 11%, 22%)
Oklch
oklch(82.2% 0.029 104.8)

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

#695E4C

Ochre · DimGray · Amber Brown

HEX
#695E4C
RGB
rgb(105, 94, 76)
HSL
hsl(37, 16%, 35%)
HSB
hsb(37, 28%, 41%)
CMYK
cmyk(0%, 10%, 28%, 59%)
Oklch
oklch(48.7% 0.031 80.0)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#402D3B

Rose Purple · DarkSlateGray · Eggplant

HEX
#402D3B
RGB
rgb(64, 45, 59)
HSL
hsl(316, 17%, 21%)
HSB
hsb(316, 30%, 25%)
CMYK
cmyk(0%, 30%, 8%, 75%)
Oklch
oklch(32.5% 0.036 336.2)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4D6CB
CECCD7

Analogous

D7D3CC
D4D6CB
CFD7CC

Triadic

D4D6CB
CCD5D7
D7CCD5

Split-Comp.

D4D6CB
CCCFD7
D3CCD7

Tetradic

D4D6CB
CCD7D3
CECCD7
D7CCCF

Contrast Matrix WCAG 2.1 Contrast

D4D6CB
CADBC9
C7C6B1
695E4C
402D3B
—
1.0
Fail
1.2
Fail
4.3
AA Large
8.6
AAA
1.0
Fail
—
1.2
Fail
4.4
AA Large
8.7
AAA
1.2
Fail
1.2
Fail
—
3.7
AA Large
7.3
AAA
4.3
AA Large
4.4
AA Large
3.7
AA Large
—
2.0
Fail
8.6
AAA
8.7
AAA
7.3
AAA
2.0
Fail
—
White BG
1.5Fail
1.4Fail
1.7Fail
6.4AA
12.7AAA
Black BG
14.3AAA
14.5AAA
12.1AAA
3.3AA Large
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5CE
D1D2CD
C7C7B6
646450
383838

Deuteranopia

D5D5CE
D0CFCE
C7C7B7
656651
393A37

Tritanopia

D4D0D0
CBD1D2
C7BABB
685455
3F3534

Achromatopsia

D4D4D4
D4D4D4
C4C4C4
5F5F5F
343434

Shades & Tints Shades & Tints

#D4D6CB

Dark
Light

#CADBC9

Dark
Light

#C7C6B1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4d6cb;
  --color-2: #cadbc9;
  --color-3: #c7c6b1;
  --color-4: #695e4c;
  --color-5: #402d3b;
}

SCSS

$color-1: #d4d6cb;
$color-2: #cadbc9;
$color-3: #c7c6b1;
$color-4: #695e4c;
$color-5: #402d3b;

TAILWIND

colors: {
  'brand-1': '#d4d6cb',
  'brand-2': '#cadbc9',
  'brand-3': '#c7c6b1',
  'brand-4': '#695e4c',
  'brand-5': '#402d3b',
}

RGB Array

[212, 214, 203], [202, 219, 201], [199, 198, 177], [105, 94, 76], [64, 45, 59]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4D6CB, #CADBC9, #C7C6B1, #695E4C, #402D3B 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: #d4d6cb; --color-2: #cadbc9; --color-3: #c7c6b1; --color-4: #695e4c; --color-5: #402d3b. 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. 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