← Back to Editor

#F0DFCD · #DBD1C5 · #AFBAB4 · #807F82 · #323136

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

#F0DFCD

Goose Yellow · Bisque · Peach Orange

HEX
#F0DFCD
RGB
rgb(240, 223, 205)
HSL
hsl(31, 54%, 87%)
HSB
hsb(31, 15%, 94%)
CMYK
cmyk(0%, 7%, 15%, 6%)
Oklch
oklch(91.3% 0.031 69.0)

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

#DBD1C5

Goose Yellow · LightGray · Peach Orange

HEX
#DBD1C5
RGB
rgb(219, 209, 197)
HSL
hsl(33, 23%, 82%)
HSB
hsb(33, 10%, 86%)
CMYK
cmyk(0%, 5%, 10%, 14%)
Oklch
oklch(86.5% 0.020 72.5)

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

#AFBAB4

Silver Gray · DarkGray · Pearl Gray

HEX
#AFBAB4
RGB
rgb(175, 186, 180)
HSL
hsl(147, 7%, 71%)
HSB
hsb(147, 6%, 73%)
CMYK
cmyk(6%, 0%, 3%, 27%)
Oklch
oklch(77.9% 0.015 162.4)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#807F82

Ink Gray · Gray · Warm Gray

HEX
#807F82
RGB
rgb(128, 127, 130)
HSL
hsl(260, 1%, 50%)
HSB
hsb(260, 2%, 51%)
CMYK
cmyk(2%, 2%, 0%, 49%)
Oklch
oklch(59.8% 0.005 301.4)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#323136

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#323136
RGB
rgb(50, 49, 54)
HSL
hsl(252, 5%, 20%)
HSB
hsb(252, 9%, 21%)
CMYK
cmyk(7%, 9%, 0%, 79%)
Oklch
oklch(31.6% 0.009 295.1)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0DFCD
CCDDF0

Analogous

F0CDCC
F0DFCD
EFF0CC

Triadic

F0DFCD
CCF0DE
DECCF0

Split-Comp.

F0DFCD
CCEFF0
CDCCF0

Tetradic

F0DFCD
CCF0CD
CCDDF0
F0CCEF

Contrast Matrix WCAG 2.1 Contrast

F0DFCD
DBD1C5
AFBAB4
807F82
323136
—
1.2
Fail
1.5
Fail
3.1
AA Large
9.9
AAA
1.2
Fail
—
1.3
Fail
2.6
Fail
8.6
AAA
1.5
Fail
1.3
Fail
—
2.0
Fail
6.5
AA
3.1
AA Large
2.6
Fail
2.0
Fail
—
3.2
AA Large
9.9
AAA
8.6
AAA
6.5
AA
3.2
AA Large
—
White BG
1.3Fail
1.5Fail
2.0Fail
4.0AA Large
12.9AAA
Black BG
16.1AAA
13.9AAA
10.5AAA
5.3AA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E8D1
D7D7C8
B4B4B5
808081
323235

Deuteranopia

EAEBD2
D7D8C9
B3B2B6
808081
323235

Tritanopia

EFD5D6
DACACB
B0B7B7
808181
323434

Achromatopsia

E2E2E2
D3D3D3
B6B6B6
808080
323232

Shades & Tints Shades & Tints

#F0DFCD

Dark
Light

#DBD1C5

Dark
Light

#AFBAB4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0dfcd;
  --color-2: #dbd1c5;
  --color-3: #afbab4;
  --color-4: #807f82;
  --color-5: #323136;
}

SCSS

$color-1: #f0dfcd;
$color-2: #dbd1c5;
$color-3: #afbab4;
$color-4: #807f82;
$color-5: #323136;

TAILWIND

colors: {
  'brand-1': '#f0dfcd',
  'brand-2': '#dbd1c5',
  'brand-3': '#afbab4',
  'brand-4': '#807f82',
  'brand-5': '#323136',
}

RGB Array

[240, 223, 205], [219, 209, 197], [175, 186, 180], [128, 127, 130], [50, 49, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0DFCD, #DBD1C5, #AFBAB4, #807F82, #323136 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: #f0dfcd; --color-2: #dbd1c5; --color-3: #afbab4; --color-4: #807f82; --color-5: #323136. 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 general-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