#FDF4C2 + #CCDDAF + #80BDBF + #A69099 + #F24962 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FDF4C2

Fresh Green · Bisque · Lemon Cream

HEX

#FDF4C2

RGB

rgb(253, 244, 194)

HSL

hsl(51, 94%, 88%)

HSB

hsb(51, 23%, 99%)

CMYK

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

Oklch

oklch(96.2% 0.065 99.0)

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

#CCDDAF

Willow Green · Silver · Apple Green

HEX

#CCDDAF

RGB

rgb(204, 221, 175)

HSL

hsl(82, 40%, 78%)

HSB

hsb(82, 21%, 87%)

CMYK

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

Oklch

oklch(87.3% 0.064 124.2)

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

#80BDBF

Sky Blue · MediumAquaMarine · Lake Green

HEX

#80BDBF

RGB

rgb(128, 189, 191)

HSL

hsl(182, 33%, 63%)

HSB

hsb(182, 33%, 75%)

CMYK

cmyk(33%, 1%, 0%, 25%)

Oklch

oklch(75.8% 0.063 198.5)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#A69099

Rouge · DarkGray · Rose Pink

HEX

#A69099

RGB

rgb(166, 144, 153)

HSL

hsl(335, 11%, 61%)

HSB

hsb(335, 13%, 65%)

CMYK

cmyk(0%, 13%, 8%, 35%)

Oklch

oklch(67.6% 0.029 351.3)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#F24962

Peach Pink · Tomato · Coral Red

HEX

#F24962

RGB

rgb(242, 73, 98)

HSL

hsl(351, 87%, 62%)

HSB

hsb(351, 70%, 95%)

CMYK

cmyk(0%, 70%, 60%, 5%)

Oklch

oklch(65.2% 0.204 16.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDF4C2

C4CCFD

Analogous

FDD8C4

FDF4C2

E9FDC4

Triadic

FDF4C2

C4FDF5

F5C4FD

Split-Comp.

FDF4C2

C4E9FD

D8C4FD

Tetradic

FDF4C2

C4FDD8

C4CCFD

FDC4E9

Contrast Matrix WCAG 2.1 Contrast

FDF4C2	CCDDAF	80BDBF	A69099	F24962
—	1.3 Fail	1.9 Fail	2.7 Fail	3.2 AA Large
1.3 Fail	—	1.5 Fail	2.1 Fail	2.5 Fail
1.9 Fail	1.5 Fail	—	1.4 Fail	1.7 Fail
2.7 Fail	2.1 Fail	1.4 Fail	—	1.2 Fail
3.2 AA Large	2.5 Fail	1.7 Fail	1.2 Fail	—

White BG

1.1Fail

1.4Fail

2.1Fail

3.0Fail

3.6AA Large

Black BG

18.9AAA

14.5AAA

9.9AAA

7.1AAA

5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9CE

D3D4BA

9A9BBF

9C9C97

A9A75C

Deuteranopia

FAFAD1

D2D1BD

9792BE

9E9F96

B3BF5B

Tritanopia

FDD8DA

CDC3C5

83BEBE

A59595

EA5756

Achromatopsia

F1F1F1

D3D3D3

ABABAB

989898

7E7E7E

Shades & Tints Shades & Tints

#FDF4C2

Dark

Light

#CCDDAF

Dark

Light

#80BDBF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fdf4c2;
  --color-2: #ccddaf;
  --color-3: #80bdbf;
  --color-4: #a69099;
  --color-5: #f24962;
}

SCSS

$color-1: #fdf4c2;
$color-2: #ccddaf;
$color-3: #80bdbf;
$color-4: #a69099;
$color-5: #f24962;

TAILWIND

colors: {
  'brand-1': '#fdf4c2',
  'brand-2': '#ccddaf',
  'brand-3': '#80bdbf',
  'brand-4': '#a69099',
  'brand-5': '#f24962',
}

RGB Array

[253, 244, 194], [204, 221, 175], [128, 189, 191], [166, 144, 153], [242, 73, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FDF4C2, #CCDDAF, #80BDBF, #A69099, #F24962 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: #fdf4c2; --color-2: #ccddaf; --color-3: #80bdbf; --color-4: #a69099; --color-5: #f24962. 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