#F4E1C0 + #D9DCC9 + #C3D4CA + #B4CCD0 + #99BCD2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4E1C0

Goose Yellow · Bisque · Peach Orange

HEX

#F4E1C0

RGB

rgb(244, 225, 192)

HSL

hsl(38, 70%, 85%)

HSB

hsb(38, 21%, 96%)

CMYK

cmyk(0%, 8%, 21%, 4%)

Oklch

oklch(91.7% 0.048 81.5)

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

#D9DCC9

Fresh Green · LightGray · Lemon Cream

HEX

#D9DCC9

RGB

rgb(217, 220, 201)

HSL

hsl(69, 21%, 83%)

HSB

hsb(69, 9%, 86%)

CMYK

cmyk(1%, 0%, 9%, 14%)

Oklch

oklch(88.7% 0.026 114.2)

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

#C3D4CA

Celadon · LightGray · Apple Green

HEX

#C3D4CA

RGB

rgb(195, 212, 202)

HSL

hsl(145, 17%, 80%)

HSB

hsb(145, 8%, 83%)

CMYK

cmyk(8%, 0%, 5%, 17%)

Oklch

oklch(85.4% 0.023 160.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#B4CCD0

Sky Blue · LightSteelBlue · Glacier Blue

HEX

#B4CCD0

RGB

rgb(180, 204, 208)

HSL

hsl(189, 23%, 76%)

HSB

hsb(189, 13%, 82%)

CMYK

cmyk(13%, 2%, 0%, 18%)

Oklch

oklch(82.9% 0.027 208.7)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#99BCD2

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#99BCD2

RGB

rgb(153, 188, 210)

HSL

hsl(203, 39%, 71%)

HSB

hsb(203, 27%, 82%)

CMYK

cmyk(27%, 10%, 0%, 18%)

Oklch

oklch(77.7% 0.049 235.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4E1C0

BED2F4

Analogous

F4C5BE

F4E1C0

ECF4BE

Triadic

F4E1C0

BEF4E0

E0BEF4

Split-Comp.

F4E1C0

BEECF4

C5BEF4

Tetradic

F4E1C0

BEF4C5

BED2F4

F4BEEC

Contrast Matrix WCAG 2.1 Contrast

F4E1C0	D9DCC9	C3D4CA	B4CCD0	99BCD2
—	1.1 Fail	1.2 Fail	1.3 Fail	1.6 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.4 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.6 Fail	1.4 Fail	1.3 Fail	1.2 Fail	—

White BG

1.3Fail

1.4Fail

1.5Fail

1.7Fail

2.0Fail

Black BG

16.4AAA

15.0AAA

13.6AAA

12.5AAA

10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECC8

DADACE

CACBCC

BEBFCF

A8A8CD

Deuteranopia

EDEECA

DADACF

C9C8CD

BDBBCF

A6A4CB

Tritanopia

F3CED0

D9D1D2

C4CECF

B5CECE

9BC8C8

Achromatopsia

E3E3E3

D9D9D9

CECECE

C5C5C5

B4B4B4

Shades & Tints Shades & Tints

#F4E1C0

Dark

Light

#D9DCC9

Dark

Light

#C3D4CA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4e1c0;
  --color-2: #d9dcc9;
  --color-3: #c3d4ca;
  --color-4: #b4ccd0;
  --color-5: #99bcd2;
}

SCSS

$color-1: #f4e1c0;
$color-2: #d9dcc9;
$color-3: #c3d4ca;
$color-4: #b4ccd0;
$color-5: #99bcd2;

TAILWIND

colors: {
  'brand-1': '#f4e1c0',
  'brand-2': '#d9dcc9',
  'brand-3': '#c3d4ca',
  'brand-4': '#b4ccd0',
  'brand-5': '#99bcd2',
}

RGB Array

[244, 225, 192], [217, 220, 201], [195, 212, 202], [180, 204, 208], [153, 188, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4E1C0, #D9DCC9, #C3D4CA, #B4CCD0, #99BCD2 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: #f4e1c0; --color-2: #d9dcc9; --color-3: #c3d4ca; --color-4: #b4ccd0; --color-5: #99bcd2. 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