#F4F3BD + #E4E9EF + #C3D0D8 + #AA9D8D + #ED9C9B · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4F3BD

Fresh Green · Bisque · Lemon Cream

HEX

#F4F3BD

RGB

rgb(244, 243, 189)

HSL

hsl(59, 71%, 85%)

HSB

hsb(59, 23%, 96%)

CMYK

cmyk(0%, 0%, 23%, 4%)

Oklch

oklch(95.2% 0.070 106.8)

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

#E4E9EF

Azure · Lavender · Sky Blue

HEX

#E4E9EF

RGB

rgb(228, 233, 239)

HSL

hsl(213, 26%, 92%)

HSB

hsb(213, 5%, 94%)

CMYK

cmyk(5%, 3%, 0%, 6%)

Oklch

oklch(93.2% 0.010 252.8)

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

#C3D0D8

Sky Blue · LightGray · Sky Blue

HEX

#C3D0D8

RGB

rgb(195, 208, 216)

HSL

hsl(203, 21%, 81%)

HSB

hsb(203, 10%, 85%)

CMYK

cmyk(10%, 4%, 0%, 15%)

Oklch

oklch(85.0% 0.018 234.5)

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

#AA9D8D

Ginger · DarkGray · Warm Sun

HEX

#AA9D8D

RGB

rgb(170, 157, 141)

HSL

hsl(33, 15%, 61%)

HSB

hsb(33, 17%, 67%)

CMYK

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

Oklch

oklch(70.3% 0.027 73.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#ED9C9B

Peach Pink · DarkSalmon · Coral Red

HEX

#ED9C9B

RGB

rgb(237, 156, 155)

HSL

hsl(1, 69%, 77%)

HSB

hsb(1, 35%, 93%)

CMYK

cmyk(0%, 34%, 35%, 7%)

Oklch

oklch(77.3% 0.097 20.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4F3BD

BEBEF4

Analogous

F4D8BE

F4F3BD

DAF4BE

Triadic

F4F3BD

BEF4F3

F3BEF4

Split-Comp.

F4F3BD

BEDAF4

D8BEF4

Tetradic

F4F3BD

BEF4D8

BEBEF4

F4BEDA

Contrast Matrix WCAG 2.1 Contrast

F4F3BD	E4E9EF	C3D0D8	AA9D8D	ED9C9B
—	1.1 Fail	1.4 Fail	2.3 Fail	1.9 Fail
1.1 Fail	—	1.3 Fail	2.2 Fail	1.7 Fail
1.4 Fail	1.3 Fail	—	1.7 Fail	1.4 Fail
2.3 Fail	2.2 Fail	1.7 Fail	—	1.2 Fail
1.9 Fail	1.7 Fail	1.4 Fail	1.2 Fail	—

White BG

1.1Fail

1.2Fail

1.6Fail

2.7Fail

2.1Fail

Black BG

18.4AAA

17.2AAA

13.3AAA

7.9AAA

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F4F4CA

E6E6EE

C9C9D6

A4A491

CAC99B

Deuteranopia

F4F4CD

E6E6ED

C8C7D6

A5A692

CFD59B

Tritanopia

F4D4D7

E4ECEC

C4D5D4

A99495

E99B9B

Achromatopsia

EDEDED

E8E8E8

CDCDCD

9F9F9F

B4B4B4

Shades & Tints Shades & Tints

#F4F3BD

Dark

Light

#E4E9EF

Dark

Light

#C3D0D8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4f3bd;
  --color-2: #e4e9ef;
  --color-3: #c3d0d8;
  --color-4: #aa9d8d;
  --color-5: #ed9c9b;
}

SCSS

$color-1: #f4f3bd;
$color-2: #e4e9ef;
$color-3: #c3d0d8;
$color-4: #aa9d8d;
$color-5: #ed9c9b;

TAILWIND

colors: {
  'brand-1': '#f4f3bd',
  'brand-2': '#e4e9ef',
  'brand-3': '#c3d0d8',
  'brand-4': '#aa9d8d',
  'brand-5': '#ed9c9b',
}

RGB Array

[244, 243, 189], [228, 233, 239], [195, 208, 216], [170, 157, 141], [237, 156, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #F4F3BD, #E4E9EF, #C3D0D8, #AA9D8D, #ED9C9B 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: #f4f3bd; --color-2: #e4e9ef; --color-3: #c3d0d8; --color-4: #aa9d8d; --color-5: #ed9c9b. 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 cool-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