#CCC8AF + #F0C0BD + #F0DF98 + #FAE6B9 + #D1EBD5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CCC8AF

Fresh Green · Silver · Sunflower

HEX

#CCC8AF

RGB

rgb(204, 200, 175)

HSL

hsl(52, 22%, 74%)

HSB

hsb(52, 14%, 80%)

CMYK

cmyk(0%, 2%, 14%, 20%)

Oklch

oklch(82.9% 0.034 99.6)

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

#F0C0BD

Peach Pink · LightPink · Cherry Blossom

HEX

#F0C0BD

RGB

rgb(240, 192, 189)

HSL

hsl(4, 63%, 84%)

HSB

hsb(4, 21%, 94%)

CMYK

cmyk(0%, 20%, 21%, 6%)

Oklch

oklch(84.9% 0.055 22.5)

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

#F0DF98

Goose Yellow · Khaki · Lemon Cream

HEX

#F0DF98

RGB

rgb(240, 223, 152)

HSL

hsl(48, 75%, 77%)

HSB

hsb(48, 37%, 94%)

CMYK

cmyk(0%, 7%, 37%, 6%)

Oklch

oklch(90.1% 0.092 96.3)

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

#FAE6B9

Goose Yellow · Wheat · Lemon Cream

HEX

#FAE6B9

RGB

rgb(250, 230, 185)

HSL

hsl(42, 87%, 85%)

HSB

hsb(42, 26%, 98%)

CMYK

cmyk(0%, 8%, 26%, 2%)

Oklch

oklch(93.0% 0.062 86.9)

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

#D1EBD5

Celadon · LightGray · Mint Green

HEX

#D1EBD5

RGB

rgb(209, 235, 213)

HSL

hsl(129, 39%, 87%)

HSB

hsb(129, 11%, 92%)

CMYK

cmyk(11%, 0%, 9%, 8%)

Oklch

oklch(91.5% 0.040 149.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCC8AF

AEB2CB

Analogous

CBB9AE

CCC8AF

C1CBAE

Triadic

CCC8AF

AECBC7

C7AECB

Split-Comp.

CCC8AF

AEC1CB

B9AECB

Tetradic

CCC8AF

AECBB9

AEB2CB

CBAEC1

Contrast Matrix WCAG 2.1 Contrast

CCC8AF	F0C0BD	F0DF98	FAE6B9	D1EBD5
—	1.0 Fail	1.3 Fail	1.4 Fail	1.3 Fail
1.0 Fail	—	1.2 Fail	1.3 Fail	1.3 Fail
1.3 Fail	1.2 Fail	—	1.1 Fail	1.1 Fail
1.4 Fail	1.3 Fail	1.1 Fail	—	1.0 Fail
1.3 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

1.7Fail

1.6Fail

1.3Fail

1.2Fail

1.3Fail

Black BG

12.4AAA

13.0AAA

15.7AAA

17.1AAA

16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACAB5

DBDBBE

E9E8A9

F1F1C4

DCDCDA

Deuteranopia

CBCBB7

DEE2BE

EAEBAD

F3F4C7

DBD9DC

Tritanopia

CCBABB

EEBEBE

EFB7BA

F9CCCE

D2DFDF

Achromatopsia

C6C6C6

CECECE

DCDCDC

E7E7E7

E1E1E1

Shades & Tints Shades & Tints

#CCC8AF

Dark

Light

#F0C0BD

Dark

Light

#F0DF98

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccc8af;
  --color-2: #f0c0bd;
  --color-3: #f0df98;
  --color-4: #fae6b9;
  --color-5: #d1ebd5;
}

SCSS

$color-1: #ccc8af;
$color-2: #f0c0bd;
$color-3: #f0df98;
$color-4: #fae6b9;
$color-5: #d1ebd5;

TAILWIND

colors: {
  'brand-1': '#ccc8af',
  'brand-2': '#f0c0bd',
  'brand-3': '#f0df98',
  'brand-4': '#fae6b9',
  'brand-5': '#d1ebd5',
}

RGB Array

[204, 200, 175], [240, 192, 189], [240, 223, 152], [250, 230, 185], [209, 235, 213]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCC8AF, #F0C0BD, #F0DF98, #FAE6B9, #D1EBD5 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: #ccc8af; --color-2: #f0c0bd; --color-3: #f0df98; --color-4: #fae6b9; --color-5: #d1ebd5. 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