← Back to Editor

#FDF7E9 · #F7E7D0 · #DDD4CB · #B2ACB6 · #626671

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

#FDF7E9

Goose Yellow · SeaShell · Lemon Cream

HEX
#FDF7E9
RGB
rgb(253, 247, 233)
HSL
hsl(42, 83%, 95%)
HSB
hsb(42, 8%, 99%)
CMYK
cmyk(0%, 2%, 8%, 1%)
Oklch
oklch(97.7% 0.020 87.5)

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

#F7E7D0

Goose Yellow · Bisque · Peach Orange

HEX
#F7E7D0
RGB
rgb(247, 231, 208)
HSL
hsl(35, 71%, 89%)
HSB
hsb(35, 16%, 97%)
CMYK
cmyk(0%, 6%, 16%, 3%)
Oklch
oklch(93.5% 0.035 77.1)

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

#DDD4CB

Goose Yellow · LightGray · Peach Orange

HEX
#DDD4CB
RGB
rgb(221, 212, 203)
HSL
hsl(30, 21%, 83%)
HSB
hsb(30, 8%, 87%)
CMYK
cmyk(0%, 4%, 8%, 13%)
Oklch
oklch(87.5% 0.016 67.6)

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

#B2ACB6

Ash · DarkGray · Silver Sand

HEX
#B2ACB6
RGB
rgb(178, 172, 182)
HSL
hsl(276, 6%, 69%)
HSB
hsb(276, 5%, 71%)
CMYK
cmyk(2%, 5%, 0%, 29%)
Oklch
oklch(75.2% 0.016 312.2)

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

#626671

Ink Gray · DimGray · Warm Gray

HEX
#626671
RGB
rgb(98, 102, 113)
HSL
hsl(224, 7%, 41%)
HSB
hsb(224, 13%, 44%)
CMYK
cmyk(13%, 10%, 0%, 56%)
Oklch
oklch(51.1% 0.018 269.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDF7E9
E8EEFD

Analogous

FDECE8
FDF7E9
F9FDE8

Triadic

FDF7E9
E8FDF6
F6E8FD

Split-Comp.

FDF7E9
E8F9FD
ECE8FD

Tetradic

FDF7E9
E8FDEC
E8EEFD
FDE8F9

Contrast Matrix WCAG 2.1 Contrast

FDF7E9
F7E7D0
DDD4CB
B2ACB6
626671
—
1.1
Fail
1.4
Fail
2.1
Fail
5.4
AA
1.1
Fail
—
1.2
Fail
1.8
Fail
4.7
AA
1.4
Fail
1.2
Fail
—
1.5
Fail
3.9
AA Large
2.1
Fail
1.8
Fail
1.5
Fail
—
2.6
Fail
5.4
AA
4.7
AA
3.9
AA Large
2.6
Fail
—
White BG
1.1Fail
1.2Fail
1.5Fail
2.2Fail
5.7AA
Black BG
19.7AAA
17.3AAA
14.4AAA
9.5AAA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFAEC
F0F0D6
D9D9CD
AFAFB4
64646E

Deuteranopia

FBFBED
F1F2D7
DADACE
B0B0B3
64636E

Tritanopia

FDEFF0
F6DADB
DDCFCF
B2B2B1
626C6C

Achromatopsia

F7F7F7
E9E9E9
D6D6D6
AFAFAF
666666

Shades & Tints Shades & Tints

#FDF7E9

Dark
Light

#F7E7D0

Dark
Light

#DDD4CB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fdf7e9;
  --color-2: #f7e7d0;
  --color-3: #ddd4cb;
  --color-4: #b2acb6;
  --color-5: #626671;
}

SCSS

$color-1: #fdf7e9;
$color-2: #f7e7d0;
$color-3: #ddd4cb;
$color-4: #b2acb6;
$color-5: #626671;

TAILWIND

colors: {
  'brand-1': '#fdf7e9',
  'brand-2': '#f7e7d0',
  'brand-3': '#ddd4cb',
  'brand-4': '#b2acb6',
  'brand-5': '#626671',
}

RGB Array

[253, 247, 233], [247, 231, 208], [221, 212, 203], [178, 172, 182], [98, 102, 113]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FDF7E9, #F7E7D0, #DDD4CB, #B2ACB6, #626671 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #fdf7e9; --color-2: #f7e7d0; --color-3: #ddd4cb; --color-4: #b2acb6; --color-5: #626671. 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 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