← Back to Editor

#D9CEB2 · #948C75 · #D5DED9 · #7A6A53 · #99B2B7

cool

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

#D9CEB2

Goose Yellow · Silver · Lemon Cream

HEX
#D9CEB2
RGB
rgb(217, 206, 178)
HSL
hsl(43, 34%, 77%)
HSB
hsb(43, 18%, 85%)
CMYK
cmyk(0%, 5%, 18%, 15%)
Oklch
oklch(85.3% 0.040 89.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#948C75

Ginger · Gray · Sunflower

HEX
#948C75
RGB
rgb(148, 140, 117)
HSL
hsl(45, 13%, 52%)
HSB
hsb(45, 21%, 58%)
CMYK
cmyk(0%, 5%, 21%, 42%)
Oklch
oklch(64.1% 0.034 91.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D5DED9

Celadon · LightGray · Mint Green

HEX
#D5DED9
RGB
rgb(213, 222, 217)
HSL
hsl(147, 12%, 85%)
HSB
hsb(147, 4%, 87%)
CMYK
cmyk(4%, 0%, 2%, 13%)
Oklch
oklch(89.2% 0.012 162.0)

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

#7A6A53

Ochre · DimGray · Amber Brown

HEX
#7A6A53
RGB
rgb(122, 106, 83)
HSL
hsl(35, 19%, 40%)
HSB
hsb(35, 32%, 48%)
CMYK
cmyk(0%, 13%, 32%, 52%)
Oklch
oklch(53.3% 0.040 76.7)

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

#99B2B7

Sky Blue · DarkGray · Lake Green

HEX
#99B2B7
RGB
rgb(153, 178, 183)
HSL
hsl(190, 17%, 66%)
HSB
hsb(190, 16%, 72%)
CMYK
cmyk(16%, 3%, 0%, 28%)
Oklch
oklch(74.6% 0.028 211.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9CEB2
B0BCD8

Analogous

D8B9B0
D9CEB2
D0D8B0

Triadic

D9CEB2
B0D8CD
CDB0D8

Split-Comp.

D9CEB2
B0D0D8
B9B0D8

Tetradic

D9CEB2
B0D8B9
B0BCD8
D8B0D0

Contrast Matrix WCAG 2.1 Contrast

D9CEB2
948C75
D5DED9
7A6A53
99B2B7
—
2.1
Fail
1.1
Fail
3.3
AA Large
1.4
Fail
2.1
Fail
—
2.4
Fail
1.6
Fail
1.5
Fail
1.1
Fail
2.4
Fail
—
3.8
AA Large
1.6
Fail
3.3
AA Large
1.6
Fail
3.8
AA Large
—
2.3
Fail
1.4
Fail
1.5
Fail
1.6
Fail
2.3
Fail
—
White BG
1.6Fail
3.4AA Large
1.4Fail
5.2AA
2.2Fail
Black BG
13.4AAA
6.3AA
15.3AAA
4.0AA Large
9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4B9
91907B
D9D9DA
737359
A4A4B6

Deuteranopia

D5D6BA
91927C
D8D8DA
74755A
A2A1B6

Tritanopia

D8BEBF
947F80
D5DBDB
795D5E
9AB5B5

Achromatopsia

CECECE
8C8C8C
DBDBDB
6C6C6C
ABABAB

Shades & Tints Shades & Tints

#D9CEB2

Dark
Light

#948C75

Dark
Light

#D5DED9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9ceb2;
  --color-2: #948c75;
  --color-3: #d5ded9;
  --color-4: #7a6a53;
  --color-5: #99b2b7;
}

SCSS

$color-1: #d9ceb2;
$color-2: #948c75;
$color-3: #d5ded9;
$color-4: #7a6a53;
$color-5: #99b2b7;

TAILWIND

colors: {
  'brand-1': '#d9ceb2',
  'brand-2': '#948c75',
  'brand-3': '#d5ded9',
  'brand-4': '#7a6a53',
  'brand-5': '#99b2b7',
}

RGB Array

[217, 206, 178], [148, 140, 117], [213, 222, 217], [122, 106, 83], [153, 178, 183]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #D9CEB2, #948C75, #D5DED9, #7A6A53, #99B2B7 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: #d9ceb2; --color-2: #948c75; --color-3: #d5ded9; --color-4: #7a6a53; --color-5: #99b2b7. 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. 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