#DEDEDE + #D9C4BF + #D9A396 + #CF8C7C + #DC4621 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DEDEDE

Plain White · LightGray · Cloud White

HEX

#DEDEDE

RGB

rgb(222, 222, 222)

HSL

hsl(0, 0%, 87%)

HSB

hsb(0, 0%, 87%)

CMYK

cmyk(0%, 0%, 0%, 13%)

Oklch

oklch(90.1% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#D9C4BF

Peach Pink · Silver · Coral Red

HEX

#D9C4BF

RGB

rgb(217, 196, 191)

HSL

hsl(12, 25%, 80%)

HSB

hsb(12, 12%, 85%)

CMYK

cmyk(0%, 10%, 12%, 15%)

Oklch

oklch(83.6% 0.025 33.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D9A396

Peach Pink · Tan · Coral Red

HEX

#D9A396

RGB

rgb(217, 163, 150)

HSL

hsl(12, 47%, 72%)

HSB

hsb(12, 31%, 85%)

CMYK

cmyk(0%, 25%, 31%, 15%)

Oklch

oklch(76.3% 0.067 33.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CF8C7C

Peach Pink · DarkSalmon · Coral Red

HEX

#CF8C7C

RGB

rgb(207, 140, 124)

HSL

hsl(12, 46%, 65%)

HSB

hsb(12, 40%, 81%)

CMYK

cmyk(0%, 32%, 40%, 19%)

Oklch

oklch(70.3% 0.086 34.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#DC4621

Vermilion · Chocolate · Passion Red

HEX

#DC4621

RGB

rgb(220, 70, 33)

HSL

hsl(12, 74%, 50%)

HSB

hsb(12, 85%, 86%)

CMYK

cmyk(0%, 68%, 85%, 14%)

Oklch

oklch(60.4% 0.193 34.6)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEDEDE

Analogous

DEDEDE

Triadic

DEDEDE

Split-Comp.

DEDEDE

Tetradic

DEDEDE

Contrast Matrix WCAG 2.1 Contrast

DEDEDE	D9C4BF	D9A396	CF8C7C	DC4621
—	1.2 Fail	1.6 Fail	2.0 Fail	3.2 AA Large
1.2 Fail	—	1.3 Fail	1.6 Fail	2.5 Fail
1.6 Fail	1.3 Fail	—	1.3 Fail	1.9 Fail
2.0 Fail	1.6 Fail	1.3 Fail	—	1.6 Fail
3.2 AA Large	2.5 Fail	1.9 Fail	1.6 Fail	—

White BG

1.3Fail

1.7Fail

2.2Fail

2.7Fail

4.3AA Large

Black BG

15.6AAA

12.6AAA

9.6AAA

7.7AAA

4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDEDE

D0D0C0

C2C199

B2B180

9B9A2A

Deuteranopia

DEDEDE

D1D3C1

C5C99A

B6BB81

A4AF2C

Tritanopia

DEDEDE

D8C1C1

D69C9C

CC8384

D53133

Achromatopsia

DEDEDE

CACACA

B2B2B2

9E9E9E

6F6F6F

Shades & Tints Shades & Tints

#DEDEDE

Dark

Light

#D9C4BF

Dark

Light

#D9A396

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dedede;
  --color-2: #d9c4bf;
  --color-3: #d9a396;
  --color-4: #cf8c7c;
  --color-5: #dc4621;
}

SCSS

$color-1: #dedede;
$color-2: #d9c4bf;
$color-3: #d9a396;
$color-4: #cf8c7c;
$color-5: #dc4621;

TAILWIND

colors: {
  'brand-1': '#dedede',
  'brand-2': '#d9c4bf',
  'brand-3': '#d9a396',
  'brand-4': '#cf8c7c',
  'brand-5': '#dc4621',
}

RGB Array

[222, 222, 222], [217, 196, 191], [217, 163, 150], [207, 140, 124], [220, 70, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #DEDEDE, #D9C4BF, #D9A396, #CF8C7C, #DC4621 is ideal for: health products, baby brands, fresh-style blogs. 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: #dedede; --color-2: #d9c4bf; --color-3: #d9a396; --color-4: #cf8c7c; --color-5: #dc4621. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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. 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