#FFF1C4 + #DBD5BD + #C2C4B7 + #7D97B0 + #F9CAC0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFF1C4

Goose Yellow · Bisque · Lemon Cream

HEX

#FFF1C4

RGB

rgb(255, 241, 196)

HSL

hsl(46, 100%, 88%)

HSB

hsb(46, 23%, 100%)

CMYK

cmyk(0%, 5%, 23%, 0%)

Oklch

oklch(95.8% 0.060 92.8)

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

#DBD5BD

Goose Yellow · LightGray · Lemon Cream

HEX

#DBD5BD

RGB

rgb(219, 213, 189)

HSL

hsl(48, 29%, 80%)

HSB

hsb(48, 14%, 86%)

CMYK

cmyk(0%, 3%, 14%, 14%)

Oklch

oklch(87.1% 0.033 95.4)

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

#C2C4B7

Fresh Green · Silver · Sunflower

HEX

#C2C4B7

RGB

rgb(194, 196, 183)

HSL

hsl(69, 10%, 74%)

HSB

hsb(69, 7%, 77%)

CMYK

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

Oklch

oklch(81.5% 0.018 113.9)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#7D97B0

Slate Blue · LightSlateGray · Navy Blue

HEX

#7D97B0

RGB

rgb(125, 151, 176)

HSL

hsl(209, 24%, 59%)

HSB

hsb(209, 29%, 69%)

CMYK

cmyk(29%, 14%, 0%, 31%)

Oklch

oklch(66.5% 0.047 247.5)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#F9CAC0

Peach Pink · Pink · Cherry Blossom

HEX

#F9CAC0

RGB

rgb(249, 202, 192)

HSL

hsl(11, 83%, 86%)

HSB

hsb(11, 23%, 98%)

CMYK

cmyk(0%, 19%, 23%, 2%)

Oklch

oklch(87.7% 0.055 32.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF1C4

C2D0FF

Analogous

FFD2C2

FFF1C4

EFFFC2

Triadic

FFF1C4

C2FFF1

F1C2FF

Split-Comp.

FFF1C4

C2EFFF

D2C2FF

Tetradic

FFF1C4

C2FFD2

C2D0FF

FFC2EF

Contrast Matrix WCAG 2.1 Contrast

FFF1C4	DBD5BD	C2C4B7	7D97B0	F9CAC0
—	1.3 Fail	1.6 Fail	2.7 Fail	1.3 Fail
1.3 Fail	—	1.2 Fail	2.1 Fail	1.0 Fail
1.6 Fail	1.2 Fail	—	1.7 Fail	1.2 Fail
2.7 Fail	2.1 Fail	1.7 Fail	—	2.1 Fail
1.3 Fail	1.0 Fail	1.2 Fail	2.1 Fail	—

White BG

1.1Fail

1.5Fail

1.8Fail

3.0AA Large

1.5Fail

Black BG

18.6AAA

14.3AAA

11.9AAA

6.9AA

14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9CF

D8D8C3

C3C3BA

8888AA

E5E4C2

Deuteranopia

FAFBD2

D9D9C4

C3C3BB

8785A9

E7EBC3

Tritanopia

FED7D9

DBC7C8

C2BDBD

7EA5A4

F7C4C5

Achromatopsia

F0F0F0

D4D4D4

C2C2C2

929292

D7D7D7

Shades & Tints Shades & Tints

#FFF1C4

Dark

Light

#DBD5BD

Dark

Light

#C2C4B7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff1c4;
  --color-2: #dbd5bd;
  --color-3: #c2c4b7;
  --color-4: #7d97b0;
  --color-5: #f9cac0;
}

SCSS

$color-1: #fff1c4;
$color-2: #dbd5bd;
$color-3: #c2c4b7;
$color-4: #7d97b0;
$color-5: #f9cac0;

TAILWIND

colors: {
  'brand-1': '#fff1c4',
  'brand-2': '#dbd5bd',
  'brand-3': '#c2c4b7',
  'brand-4': '#7d97b0',
  'brand-5': '#f9cac0',
}

RGB Array

[255, 241, 196], [219, 213, 189], [194, 196, 183], [125, 151, 176], [249, 202, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF1C4, #DBD5BD, #C2C4B7, #7D97B0, #F9CAC0 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: #fff1c4; --color-2: #dbd5bd; --color-3: #c2c4b7; --color-4: #7d97b0; --color-5: #f9cac0. 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