#9CA49E + #C2CDC5 + #FEFCCB + #F2D2AC + #D8B798 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9CA49E

Ash · DarkGray · Silver Sand

HEX

#9CA49E

RGB

rgb(156, 164, 158)

HSL

hsl(135, 4%, 63%)

HSB

hsb(135, 5%, 64%)

CMYK

cmyk(5%, 0%, 4%, 36%)

Oklch

oklch(71.0% 0.012 153.6)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#C2CDC5

Celadon · Silver · Apple Green

HEX

#C2CDC5

RGB

rgb(194, 205, 197)

HSL

hsl(136, 10%, 78%)

HSB

hsb(136, 5%, 80%)

CMYK

cmyk(5%, 0%, 4%, 20%)

Oklch

oklch(83.8% 0.016 154.4)

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

#FEFCCB

Fresh Green · Beige · Lemon Cream

HEX

#FEFCCB

RGB

rgb(254, 252, 203)

HSL

hsl(58, 96%, 90%)

HSB

hsb(58, 20%, 100%)

CMYK

cmyk(0%, 1%, 20%, 0%)

Oklch

oklch(98.1% 0.063 105.6)

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

#F2D2AC

Goose Yellow · Wheat · Peach Orange

HEX

#F2D2AC

RGB

rgb(242, 210, 172)

HSL

hsl(33, 73%, 81%)

HSB

hsb(33, 29%, 95%)

CMYK

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

Oklch

oklch(88.1% 0.062 71.7)

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

#D8B798

Apricot · Tan · Warm Sun

HEX

#D8B798

RGB

rgb(216, 183, 152)

HSL

hsl(29, 45%, 72%)

HSB

hsb(29, 30%, 85%)

CMYK

cmyk(0%, 15%, 30%, 15%)

Oklch

oklch(80.0% 0.057 65.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9CA49E

A49DA3

Analogous

9FA49D

9CA49E

9DA4A3

Triadic

9CA49E

9F9DA4

A49F9D

Split-Comp.

9CA49E

A39DA4

A49D9F

Tetradic

9CA49E

9D9FA4

A49DA3

A4A39D

Contrast Matrix WCAG 2.1 Contrast

9CA49E	C2CDC5	FEFCCB	F2D2AC	D8B798
—	1.6 Fail	2.4 Fail	1.8 Fail	1.4 Fail
1.6 Fail	—	1.6 Fail	1.1 Fail	1.2 Fail
2.4 Fail	1.6 Fail	—	1.4 Fail	1.8 Fail
1.8 Fail	1.1 Fail	1.4 Fail	—	1.3 Fail
1.4 Fail	1.2 Fail	1.8 Fail	1.3 Fail	—

White BG

2.6Fail

1.6Fail

1.0Fail

1.4Fail

1.9Fail

Black BG

8.2AAA

12.8AAA

20.0AAA

14.6AAA

11.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9FA09F

C7C7C7

FDFDD7

E4E4B5

CAC9A0

Deuteranopia

9F9EA0

C6C5C7

FDFDDA

E6E8B7

CCCEA1

Tritanopia

9CA1A1

C3C8C9

FEE0E2

F0BCBE

D6A5A7

Achromatopsia

A1A1A1

C9C9C9

F7F7F7

D7D7D7

BDBDBD

Shades & Tints Shades & Tints

#9CA49E

Dark

Light

#C2CDC5

Dark

Light

#FEFCCB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ca49e;
  --color-2: #c2cdc5;
  --color-3: #fefccb;
  --color-4: #f2d2ac;
  --color-5: #d8b798;
}

SCSS

$color-1: #9ca49e;
$color-2: #c2cdc5;
$color-3: #fefccb;
$color-4: #f2d2ac;
$color-5: #d8b798;

TAILWIND

colors: {
  'brand-1': '#9ca49e',
  'brand-2': '#c2cdc5',
  'brand-3': '#fefccb',
  'brand-4': '#f2d2ac',
  'brand-5': '#d8b798',
}

RGB Array

[156, 164, 158], [194, 205, 197], [254, 252, 203], [242, 210, 172], [216, 183, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9CA49E, #C2CDC5, #FEFCCB, #F2D2AC, #D8B798 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: #9ca49e; --color-2: #c2cdc5; --color-3: #fefccb; --color-4: #f2d2ac; --color-5: #d8b798. 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