#C87F6C + #FFF1C6 + #BED2B7 + #A8996E + #D3D486 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C87F6C

Crimson · DarkSalmon · Passion Red

HEX

#C87F6C

RGB

rgb(200, 127, 108)

HSL

hsl(12, 46%, 60%)

HSB

hsb(12, 46%, 78%)

CMYK

cmyk(0%, 37%, 46%, 22%)

Oklch

oklch(66.8% 0.096 35.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#FFF1C6

Goose Yellow · Bisque · Lemon Cream

HEX

#FFF1C6

RGB

rgb(255, 241, 198)

HSL

hsl(45, 100%, 89%)

HSB

hsb(45, 22%, 100%)

CMYK

cmyk(0%, 5%, 22%, 0%)

Oklch

oklch(95.9% 0.058 92.1)

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

#BED2B7

Celadon · Silver · Apple Green

HEX

#BED2B7

RGB

rgb(190, 210, 183)

HSL

hsl(104, 23%, 77%)

HSB

hsb(104, 13%, 82%)

CMYK

cmyk(10%, 0%, 13%, 18%)

Oklch

oklch(84.1% 0.043 137.6)

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

#A8996E

Ginger · Gray · Sunflower

HEX

#A8996E

RGB

rgb(168, 153, 110)

HSL

hsl(44, 25%, 55%)

HSB

hsb(44, 35%, 66%)

CMYK

cmyk(0%, 9%, 35%, 34%)

Oklch

oklch(68.5% 0.062 91.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#D3D486

Fresh Green · BurlyWood · Sunflower

HEX

#D3D486

RGB

rgb(211, 212, 134)

HSL

hsl(61, 48%, 68%)

HSB

hsb(61, 37%, 83%)

CMYK

cmyk(0%, 0%, 37%, 17%)

Oklch

oklch(85.2% 0.100 109.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C87F6C

6AB5C8

Analogous

C86A86

C87F6C

C8AC6A

Triadic

C87F6C

6AC87D

7D6AC8

Split-Comp.

C87F6C

6AC8AC

6A86C8

Tetradic

C87F6C

86C86A

6AB5C8

AC6AC8

Contrast Matrix WCAG 2.1 Contrast

C87F6C	FFF1C6	BED2B7	A8996E	D3D486
—	2.8 Fail	2.0 Fail	1.1 Fail	2.0 Fail
2.8 Fail	—	1.4 Fail	2.5 Fail	1.4 Fail
2.0 Fail	1.4 Fail	—	1.8 Fail	1.0 Fail
1.1 Fail	2.5 Fail	1.8 Fail	—	1.8 Fail
2.0 Fail	1.4 Fail	1.0 Fail	1.8 Fail	—

White BG

3.1AA Large

1.1Fail

1.6Fail

2.8Fail

1.6Fail

Black BG

6.7AA

18.6AAA

13.1AAA

7.4AAA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A871

F9F9D0

C7C7BE

A2A178

D3D399

Deuteranopia

ADB272

FAFBD3

C6C4BF

A2A47B

D3D39D

Tritanopia

C47475

FED9DA

BFC3C4

A78182

D3A8AB

Achromatopsia

939393

F0F0F0

C9C9C9

999999

CBCBCB

Shades & Tints Shades & Tints

#C87F6C

Dark

Light

#FFF1C6

Dark

Light

#BED2B7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c87f6c;
  --color-2: #fff1c6;
  --color-3: #bed2b7;
  --color-4: #a8996e;
  --color-5: #d3d486;
}

SCSS

$color-1: #c87f6c;
$color-2: #fff1c6;
$color-3: #bed2b7;
$color-4: #a8996e;
$color-5: #d3d486;

TAILWIND

colors: {
  'brand-1': '#c87f6c',
  'brand-2': '#fff1c6',
  'brand-3': '#bed2b7',
  'brand-4': '#a8996e',
  'brand-5': '#d3d486',
}

RGB Array

[200, 127, 108], [255, 241, 198], [190, 210, 183], [168, 153, 110], [211, 212, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C87F6C, #FFF1C6, #BED2B7, #A8996E, #D3D486 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: #c87f6c; --color-2: #fff1c6; --color-3: #bed2b7; --color-4: #a8996e; --color-5: #d3d486. 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