#C0DAB1 + #CFD6AC + #DDD2A6 + #ECCEA1 + #FACA9B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C0DAB1

Celadon · Silver · Apple Green

HEX

#C0DAB1

RGB

rgb(192, 218, 177)

HSL

hsl(98, 36%, 77%)

HSB

hsb(98, 19%, 85%)

CMYK

cmyk(12%, 0%, 19%, 15%)

Oklch

oklch(85.8% 0.062 134.1)

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

#CFD6AC

Willow Green · Silver · Apple Green

HEX

#CFD6AC

RGB

rgb(207, 214, 172)

HSL

hsl(70, 34%, 76%)

HSB

hsb(70, 20%, 84%)

CMYK

cmyk(3%, 0%, 20%, 16%)

Oklch

oklch(86.0% 0.057 115.3)

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

#DDD2A6

Goose Yellow · Wheat · Lemon Cream

HEX

#DDD2A6

RGB

rgb(221, 210, 166)

HSL

hsl(48, 45%, 76%)

HSB

hsb(48, 25%, 87%)

CMYK

cmyk(0%, 5%, 25%, 13%)

Oklch

oklch(86.2% 0.059 95.7)

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

#ECCEA1

Goose Yellow · Wheat · Peach Orange

HEX

#ECCEA1

RGB

rgb(236, 206, 161)

HSL

hsl(36, 66%, 78%)

HSB

hsb(36, 32%, 93%)

CMYK

cmyk(0%, 13%, 32%, 7%)

Oklch

oklch(86.6% 0.068 77.7)

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

#FACA9B

Goose Yellow · Wheat · Peach Orange

HEX

#FACA9B

RGB

rgb(250, 202, 155)

HSL

hsl(30, 90%, 79%)

HSB

hsb(30, 38%, 98%)

CMYK

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

Oklch

oklch(87.0% 0.082 65.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C0DAB1

CAAFD9

Analogous

D4D9AF

C0DAB1

AFD9B5

Triadic

C0DAB1

AFBFD9

D9AFBF

Split-Comp.

C0DAB1

B5AFD9

D9AFD4

Tetradic

C0DAB1

AFD4D9

CAAFD9

D9B5AF

Contrast Matrix WCAG 2.1 Contrast

C0DAB1	CFD6AC	DDD2A6	ECCEA1	FACA9B
—	1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail	—

White BG

1.5Fail

Black BG

13.9AAA

13.8AAA

13.9AAA

14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBBB

D2D2B6

D8D8B1

DFDFAC

E5E5A6

Deuteranopia

CAC8BD

D2D1B9

D9DAB3

E1E3AF

E8ECA9

Tritanopia

C1C3C4

CFBEC0

DCB9BB

EBB4B6

F8AFB1

Achromatopsia

CECECE

CFCFCF

D0D0D0

D2D2D2

D3D3D3

Shades & Tints Shades & Tints

#C0DAB1

Dark

Light

#CFD6AC

Dark

Light

#DDD2A6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c0dab1;
  --color-2: #cfd6ac;
  --color-3: #ddd2a6;
  --color-4: #eccea1;
  --color-5: #faca9b;
}

SCSS

$color-1: #c0dab1;
$color-2: #cfd6ac;
$color-3: #ddd2a6;
$color-4: #eccea1;
$color-5: #faca9b;

TAILWIND

colors: {
  'brand-1': '#c0dab1',
  'brand-2': '#cfd6ac',
  'brand-3': '#ddd2a6',
  'brand-4': '#eccea1',
  'brand-5': '#faca9b',
}

RGB Array

[192, 218, 177], [207, 214, 172], [221, 210, 166], [236, 206, 161], [250, 202, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C0DAB1, #CFD6AC, #DDD2A6, #ECCEA1, #FACA9B 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: #c0dab1; --color-2: #cfd6ac; --color-3: #ddd2a6; --color-4: #eccea1; --color-5: #faca9b. 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