#C9CC9E + #837970 + #FD999A + #F3CEB4 + #D7E6CF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C9CC9E

Fresh Green · Tan · Sunflower

HEX

#C9CC9E

RGB

rgb(201, 204, 158)

HSL

hsl(64, 31%, 71%)

HSB

hsb(64, 23%, 80%)

CMYK

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

Oklch

oklch(83.1% 0.062 110.8)

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

#837970

Tangerine · Gray · Warm Gray

HEX

#837970

RGB

rgb(131, 121, 112)

HSL

hsl(28, 8%, 48%)

HSB

hsb(28, 15%, 51%)

CMYK

cmyk(0%, 8%, 15%, 49%)

Oklch

oklch(58.2% 0.018 64.5)

Traditional「Tangerine」· Paint「Warm Gray」· Creative Urban Concrete

#FD999A

Peach Pink · LightSalmon · Coral Red

HEX

#FD999A

RGB

rgb(253, 153, 154)

HSL

hsl(359, 96%, 80%)

HSB

hsb(359, 40%, 99%)

CMYK

cmyk(0%, 40%, 39%, 1%)

Oklch

oklch(78.6% 0.120 19.5)

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

#F3CEB4

Apricot · Wheat · Peach Orange

HEX

#F3CEB4

RGB

rgb(243, 206, 180)

HSL

hsl(25, 72%, 83%)

HSB

hsb(25, 26%, 95%)

CMYK

cmyk(0%, 15%, 26%, 5%)

Oklch

oklch(87.6% 0.054 57.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D7E6CF

Celadon · LightGray · Mint Green

HEX

#D7E6CF

RGB

rgb(215, 230, 207)

HSL

hsl(99, 32%, 86%)

HSB

hsb(99, 10%, 90%)

CMYK

cmyk(7%, 0%, 10%, 10%)

Oklch

oklch(90.7% 0.035 134.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C9CC9E

A19ECC

Analogous

CCB89E

C9CC9E

B2CC9E

Triadic

C9CC9E

9EC9CC

CC9EC9

Split-Comp.

C9CC9E

9EB2CC

B89ECC

Tetradic

C9CC9E

9ECCB8

A19ECC

CC9EB2

Contrast Matrix WCAG 2.1 Contrast

C9CC9E	837970	FD999A	F3CEB4	D7E6CF
—	2.6 Fail	1.2 Fail	1.1 Fail	1.3 Fail
2.6 Fail	—	2.1 Fail	2.9 Fail	3.3 AA Large
1.2 Fail	2.1 Fail	—	1.4 Fail	1.6 Fail
1.1 Fail	2.9 Fail	1.4 Fail	—	1.1 Fail
1.3 Fail	3.3 AA Large	1.6 Fail	1.1 Fail	—

White BG

1.7Fail

4.3AA Large

2.1Fail

1.5Fail

1.3Fail

Black BG

12.6AAA

4.9AA

10.2AAA

14.3AAA

16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACAA9

7F7F72

D2D19A

E3E3BA

DDDED5

Deuteranopia

CACAAC

7F8073

D8DF9A

E5E8BC

DDDCD6

Tritanopia

C9B2B4

837474

F89A9A

F1BFC0

D8D9DA

Achromatopsia

C6C6C6

7B7B7B

B7B7B7

D6D6D6

DFDFDF

Shades & Tints Shades & Tints

#C9CC9E

Dark

Light

#837970

Dark

Light

#FD999A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c9cc9e;
  --color-2: #837970;
  --color-3: #fd999a;
  --color-4: #f3ceb4;
  --color-5: #d7e6cf;
}

SCSS

$color-1: #c9cc9e;
$color-2: #837970;
$color-3: #fd999a;
$color-4: #f3ceb4;
$color-5: #d7e6cf;

TAILWIND

colors: {
  'brand-1': '#c9cc9e',
  'brand-2': '#837970',
  'brand-3': '#fd999a',
  'brand-4': '#f3ceb4',
  'brand-5': '#d7e6cf',
}

RGB Array

[201, 204, 158], [131, 121, 112], [253, 153, 154], [243, 206, 180], [215, 230, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C9CC9E, #837970, #FD999A, #F3CEB4, #D7E6CF 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: #c9cc9e; --color-2: #837970; --color-3: #fd999a; --color-4: #f3ceb4; --color-5: #d7e6cf. 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