← Back to Editor

#DEE5EF · #E69D97 · #F57C74 · #BC8873 · #DBBB54

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DEE5EF

Azure · Lavender · Sky Blue

HEX
#DEE5EF
RGB
rgb(222, 229, 239)
HSL
hsl(215, 35%, 90%)
HSB
hsb(215, 7%, 94%)
CMYK
cmyk(7%, 4%, 0%, 6%)
Oklch
oklch(92.0% 0.016 257.2)

TraditionalAzure」· PaintSky Blue」· Creative Twilight Haze

#E69D97

Peach Pink · DarkSalmon · Coral Red

HEX
#E69D97
RGB
rgb(230, 157, 151)
HSL
hsl(5, 61%, 75%)
HSB
hsb(5, 34%, 90%)
CMYK
cmyk(0%, 32%, 34%, 10%)
Oklch
oklch(76.6% 0.088 24.5)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#F57C74

Peach Pink · Salmon · Coral Red

HEX
#F57C74
RGB
rgb(245, 124, 116)
HSL
hsl(4, 87%, 71%)
HSB
hsb(4, 53%, 96%)
CMYK
cmyk(0%, 49%, 53%, 4%)
Oklch
oklch(72.3% 0.150 25.3)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#BC8873

Tangerine · DarkSalmon · Warm Sun

HEX
#BC8873
RGB
rgb(188, 136, 115)
HSL
hsl(17, 35%, 59%)
HSB
hsb(17, 39%, 74%)
CMYK
cmyk(0%, 28%, 39%, 26%)
Oklch
oklch(67.2% 0.071 42.9)

TraditionalTangerine」· PaintWarm Sun」· Creative Blush Sunrise

#DBBB54

Ginger · SandyBrown · Sunflower

HEX
#DBBB54
RGB
rgb(219, 187, 84)
HSL
hsl(46, 65%, 59%)
HSB
hsb(46, 62%, 86%)
CMYK
cmyk(0%, 15%, 62%, 14%)
Oklch
oklch(80.0% 0.127 92.0)

TraditionalGinger」· PaintSunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEE5EF
EEE7DD

Analogous

DDEDEE
DEE5EF
DEDDEE

Triadic

DEE5EF
EEDDE4
E4EEDD

Split-Comp.

DEE5EF
EEDEDD
EDEEDD

Tetradic

DEE5EF
EEDDED
EEE7DD
DDEEDE

Contrast Matrix WCAG 2.1 Contrast

DEE5EF
E69D97
F57C74
BC8873
DBBB54
1.7
Fail
2.1
Fail
2.4
Fail
1.5
Fail
1.7
Fail
1.2
Fail
1.4
Fail
1.2
Fail
2.1
Fail
1.2
Fail
1.2
Fail
1.4
Fail
2.4
Fail
1.4
Fail
1.2
Fail
1.6
Fail
1.5
Fail
1.2
Fail
1.4
Fail
1.6
Fail
White BG
1.3Fail
2.2Fail
2.6Fail
3.0AA Large
1.9Fail
Black BG
16.6AAA
9.6AAA
8.0AAA
6.9AA
11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E1ED
C6C698
C1C076
A5A578
CDCD6D

Deuteranopia

E1E0EC
CBD099
C8D176
A9AC79
CFD173

Tritanopia

DEEBEA
E29A9A
EF7778
B97C7D
D98185

Achromatopsia

E4E4E4
B2B2B2
9F9F9F
959595
B9B9B9

Shades & Tints Shades & Tints

#DEE5EF

Dark
Light

#E69D97

Dark
Light

#F57C74

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dee5ef;
  --color-2: #e69d97;
  --color-3: #f57c74;
  --color-4: #bc8873;
  --color-5: #dbbb54;
}

SCSS

$color-1: #dee5ef;
$color-2: #e69d97;
$color-3: #f57c74;
$color-4: #bc8873;
$color-5: #dbbb54;

TAILWIND

colors: {
  'brand-1': '#dee5ef',
  'brand-2': '#e69d97',
  'brand-3': '#f57c74',
  'brand-4': '#bc8873',
  'brand-5': '#dbbb54',
}

RGB Array

[222, 229, 239], [230, 157, 151], [245, 124, 116], [188, 136, 115], [219, 187, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DEE5EF, #E69D97, #F57C74, #BC8873, #DBBB54 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: #dee5ef; --color-2: #e69d97; --color-3: #f57c74; --color-4: #bc8873; --color-5: #dbbb54. 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 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