#CFC7BA + #9FC7BB + #C4C4A7 + #E0C09B + #FFC3A6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CFC7BA

Goose Yellow · Silver · Peach Orange

HEX

#CFC7BA

RGB

rgb(207, 199, 186)

HSL

hsl(37, 18%, 77%)

HSB

hsb(37, 10%, 81%)

CMYK

cmyk(0%, 4%, 10%, 19%)

Oklch

oklch(83.3% 0.020 80.1)

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

#9FC7BB

Jade · Silver · Lake Green

HEX

#9FC7BB

RGB

rgb(159, 199, 187)

HSL

hsl(162, 26%, 70%)

HSB

hsb(162, 20%, 78%)

CMYK

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

Oklch

oklch(79.7% 0.046 174.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#C4C4A7

Fresh Green · Silver · Sunflower

HEX

#C4C4A7

RGB

rgb(196, 196, 167)

HSL

hsl(60, 20%, 71%)

HSB

hsb(60, 15%, 77%)

CMYK

cmyk(0%, 0%, 15%, 23%)

Oklch

oklch(81.3% 0.039 107.2)

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

#E0C09B

Goose Yellow · BurlyWood · Warm Sun

HEX

#E0C09B

RGB

rgb(224, 192, 155)

HSL

hsl(32, 53%, 74%)

HSB

hsb(32, 31%, 88%)

CMYK

cmyk(0%, 14%, 31%, 12%)

Oklch

oklch(82.6% 0.061 70.9)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#FFC3A6

Apricot · LightPink · Peach Orange

HEX

#FFC3A6

RGB

rgb(255, 195, 166)

HSL

hsl(20, 100%, 83%)

HSB

hsb(20, 35%, 100%)

CMYK

cmyk(0%, 24%, 35%, 0%)

Oklch

oklch(86.4% 0.079 47.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFC7BA

BAC2CF

Analogous

CFBCBA

CFC7BA

CCCFBA

Triadic

CFC7BA

BACFC7

C7BACF

Split-Comp.

CFC7BA

BACCCF

BCBACF

Tetradic

CFC7BA

BACFBC

BAC2CF

CFBACC

Contrast Matrix WCAG 2.1 Contrast

CFC7BA	9FC7BB	C4C4A7	E0C09B	FFC3A6
—	1.1 Fail	1.1 Fail	1.0 Fail	1.1 Fail
1.1 Fail	—	1.0 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.2 Fail
1.0 Fail	1.1 Fail	1.0 Fail	—	1.1 Fail
1.1 Fail	1.2 Fail	1.2 Fail	1.1 Fail	—

White BG

1.7Fail

1.8Fail

1.7Fail

1.5Fail

Black BG

12.5AAA

11.4AAA

11.8AAA

12.2AAA

13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCBBD

B0B1BE

C4C4AE

D2D2A4

E5E4AD

Deuteranopia

CCCDBE

AEABBF

C4C4B0

D4D6A6

E9EDAF

Tritanopia

CFC0C0

A1C0C1

C4B4B5

DEABAD

FCB3B4

Achromatopsia

C8C8C8

BABABA

C1C1C1

C5C5C5

D2D2D2

Shades & Tints Shades & Tints

#CFC7BA

Dark

Light

#9FC7BB

Dark

Light

#C4C4A7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfc7ba;
  --color-2: #9fc7bb;
  --color-3: #c4c4a7;
  --color-4: #e0c09b;
  --color-5: #ffc3a6;
}

SCSS

$color-1: #cfc7ba;
$color-2: #9fc7bb;
$color-3: #c4c4a7;
$color-4: #e0c09b;
$color-5: #ffc3a6;

TAILWIND

colors: {
  'brand-1': '#cfc7ba',
  'brand-2': '#9fc7bb',
  'brand-3': '#c4c4a7',
  'brand-4': '#e0c09b',
  'brand-5': '#ffc3a6',
}

RGB Array

[207, 199, 186], [159, 199, 187], [196, 196, 167], [224, 192, 155], [255, 195, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFC7BA, #9FC7BB, #C4C4A7, #E0C09B, #FFC3A6 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: #cfc7ba; --color-2: #9fc7bb; --color-3: #c4c4a7; --color-4: #e0c09b; --color-5: #ffc3a6. 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