← Back to Editor

#DED9D2 · #F4F1E9 · #B5C0D1 · #7F96BF · #5A5D73

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

WorkspaceReadingData Visualization

Color Details Color Details

#DED9D2

Goose Yellow · LightGray · Peach Orange

HEX
#DED9D2
RGB
rgb(222, 217, 210)
HSL
hsl(35, 15%, 85%)
HSB
hsb(35, 5%, 87%)
CMYK
cmyk(0%, 2%, 5%, 13%)
Oklch
oklch(88.7% 0.011 76.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F4F1E9

Goose Yellow · Linen · Lemon Cream

HEX
#F4F1E9
RGB
rgb(244, 241, 233)
HSL
hsl(44, 33%, 94%)
HSB
hsb(44, 5%, 96%)
CMYK
cmyk(0%, 1%, 5%, 4%)
Oklch
oklch(95.8% 0.011 89.7)

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

#B5C0D1

Azure · LightSteelBlue · Cobalt Blue

HEX
#B5C0D1
RGB
rgb(181, 192, 209)
HSL
hsl(216, 23%, 76%)
HSB
hsb(216, 13%, 82%)
CMYK
cmyk(13%, 8%, 0%, 18%)
Oklch
oklch(80.5% 0.027 259.0)

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

#7F96BF

Azure · LightSlateGray · Cobalt Blue

HEX
#7F96BF
RGB
rgb(127, 150, 191)
HSL
hsl(218, 33%, 62%)
HSB
hsb(218, 34%, 75%)
CMYK
cmyk(34%, 21%, 0%, 25%)
Oklch
oklch(67.1% 0.067 261.8)

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

#5A5D73

Indigo · DimGray · Prussian Blue

HEX
#5A5D73
RGB
rgb(90, 93, 115)
HSL
hsl(233, 12%, 40%)
HSB
hsb(233, 22%, 45%)
CMYK
cmyk(22%, 19%, 0%, 55%)
Oklch
oklch(48.4% 0.035 278.9)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DED9D2
D3D8DE

Analogous

DED4D3
DED9D2
DEDED3

Triadic

DED9D2
D3DEDA
DAD3DE

Split-Comp.

DED9D2
D3DEDE
D4D3DE

Tetradic

DED9D2
D3DED4
D3D8DE
DED3DE

Contrast Matrix WCAG 2.1 Contrast

DED9D2
F4F1E9
B5C0D1
7F96BF
5A5D73
—
1.2
Fail
1.3
Fail
2.1
Fail
4.6
AA
1.2
Fail
—
1.6
Fail
2.7
Fail
5.7
AA
1.3
Fail
1.6
Fail
—
1.6
Fail
3.5
AA Large
2.1
Fail
2.7
Fail
1.6
Fail
—
2.2
Fail
4.6
AA
5.7
AA
3.5
AA Large
2.2
Fail
—
White BG
1.4Fail
1.1Fail
1.8Fail
3.0Fail
6.5AA
Black BG
15.0AAA
18.6AAA
11.4AAA
7.0AAA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCD4
F3F3EB
BABACD
8989B5
5B5B6E

Deuteranopia

DCDCD4
F3F3EB
B9B8CC
8886B3
5B5B6C

Tritanopia

DED5D5
F4ECED
B6CAC9
80ADAC
5A6969

Achromatopsia

DADADA
F1F1F1
BFBFBF
949494
5F5F5F

Shades & Tints Shades & Tints

#DED9D2

Dark
Light

#F4F1E9

Dark
Light

#B5C0D1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ded9d2;
  --color-2: #f4f1e9;
  --color-3: #b5c0d1;
  --color-4: #7f96bf;
  --color-5: #5a5d73;
}

SCSS

$color-1: #ded9d2;
$color-2: #f4f1e9;
$color-3: #b5c0d1;
$color-4: #7f96bf;
$color-5: #5a5d73;

TAILWIND

colors: {
  'brand-1': '#ded9d2',
  'brand-2': '#f4f1e9',
  'brand-3': '#b5c0d1',
  'brand-4': '#7f96bf',
  'brand-5': '#5a5d73',
}

RGB Array

[222, 217, 210], [244, 241, 233], [181, 192, 209], [127, 150, 191], [90, 93, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DED9D2, #F4F1E9, #B5C0D1, #7F96BF, #5A5D73 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #ded9d2; --color-2: #f4f1e9; --color-3: #b5c0d1; --color-4: #7f96bf; --color-5: #5a5d73. 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. 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 beauty, lifestyle, arts 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