#DF5A43 + #E4B06D + #FFEDC4 + #D1D8E3 + #A4A4B0 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DF5A43

Vermilion · Tomato · Passion Red

HEX

#DF5A43

RGB

rgb(223, 90, 67)

HSL

hsl(9, 71%, 57%)

HSB

hsb(9, 70%, 87%)

CMYK

cmyk(0%, 60%, 70%, 13%)

Oklch

oklch(63.6% 0.171 31.9)

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

#E4B06D

Ginger · SandyBrown · Warm Sun

HEX

#E4B06D

RGB

rgb(228, 176, 109)

HSL

hsl(34, 69%, 66%)

HSB

hsb(34, 52%, 89%)

CMYK

cmyk(0%, 23%, 52%, 11%)

Oklch

oklch(79.1% 0.104 72.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#FFEDC4

Goose Yellow · Bisque · Lemon Cream

HEX

#FFEDC4

RGB

rgb(255, 237, 196)

HSL

hsl(42, 100%, 88%)

HSB

hsb(42, 23%, 100%)

CMYK

cmyk(0%, 7%, 23%, 0%)

Oklch

oklch(95.0% 0.057 87.1)

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

#D1D8E3

Azure · LightGray · Sky Blue

HEX

#D1D8E3

RGB

rgb(209, 216, 227)

HSL

hsl(217, 24%, 85%)

HSB

hsb(217, 8%, 89%)

CMYK

cmyk(8%, 5%, 0%, 11%)

Oklch

oklch(88.0% 0.017 259.4)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#A4A4B0

Ash · DarkGray · Silver Sand

HEX

#A4A4B0

RGB

rgb(164, 164, 176)

HSL

hsl(240, 7%, 67%)

HSB

hsb(240, 7%, 69%)

CMYK

cmyk(7%, 7%, 0%, 31%)

Oklch

oklch(72.2% 0.017 286.0)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DF5A43

43C8DF

Analogous

DF437A

DF5A43

DFA943

Triadic

DF5A43

43DF5B

5B43DF

Split-Comp.

DF5A43

43DFA9

437ADF

Tetradic

DF5A43

7ADF43

43C8DF

A943DF

Contrast Matrix WCAG 2.1 Contrast

DF5A43	E4B06D	FFEDC4	D1D8E3	A4A4B0
—	1.9 Fail	3.2 AA Large	2.6 Fail	1.5 Fail
1.9 Fail	—	1.7 Fail	1.4 Fail	1.3 Fail
3.2 AA Large	1.7 Fail	—	1.2 Fail	2.1 Fail
2.6 Fail	1.4 Fail	1.2 Fail	—	1.7 Fail
1.5 Fail	1.3 Fail	2.1 Fail	1.7 Fail	—

White BG

3.7AA Large

2.0Fail

1.2Fail

1.4Fail

2.5Fail

Black BG

5.7AA

10.7AAA

18.2AAA

14.6AAA

8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A449

CDCD7D

F7F7CE

D4D4E0

A4A4AD

Deuteranopia

ADB74A

D1D481

F8FAD0

D4D3E0

A4A4AC

Tritanopia

D84D4E

E18A8D

FED6D7

D1DEDE

A4ABAA

Achromatopsia

7F7F7F

B8B8B8

EEEEEE

D7D7D7

A5A5A5

Shades & Tints Shades & Tints

#DF5A43

Dark

Light

#E4B06D

Dark

Light

#FFEDC4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #df5a43;
  --color-2: #e4b06d;
  --color-3: #ffedc4;
  --color-4: #d1d8e3;
  --color-5: #a4a4b0;
}

SCSS

$color-1: #df5a43;
$color-2: #e4b06d;
$color-3: #ffedc4;
$color-4: #d1d8e3;
$color-5: #a4a4b0;

TAILWIND

colors: {
  'brand-1': '#df5a43',
  'brand-2': '#e4b06d',
  'brand-3': '#ffedc4',
  'brand-4': '#d1d8e3',
  'brand-5': '#a4a4b0',
}

RGB Array

[223, 90, 67], [228, 176, 109], [255, 237, 196], [209, 216, 227], [164, 164, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #DF5A43, #E4B06D, #FFEDC4, #D1D8E3, #A4A4B0 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: #df5a43; --color-2: #e4b06d; --color-3: #ffedc4; --color-4: #d1d8e3; --color-5: #a4a4b0. 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