#887F75 + #C69187 + #F1B090 + #FDD3A3 + #F9E9C8 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#887F75

Ochre · Gray · Warm Gray

HEX

#887F75

RGB

rgb(136, 127, 117)

HSL

hsl(32, 8%, 50%)

HSB

hsb(32, 14%, 53%)

CMYK

cmyk(0%, 7%, 14%, 47%)

Oklch

oklch(60.2% 0.018 70.4)

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

#C69187

Peach Pink · Tan · Coral Red

HEX

#C69187

RGB

rgb(198, 145, 135)

HSL

hsl(10, 36%, 65%)

HSB

hsb(10, 32%, 78%)

CMYK

cmyk(0%, 27%, 32%, 22%)

Oklch

oklch(70.5% 0.066 30.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F1B090

Apricot · BurlyWood · Warm Sun

HEX

#F1B090

RGB

rgb(241, 176, 144)

HSL

hsl(20, 78%, 75%)

HSB

hsb(20, 40%, 95%)

CMYK

cmyk(0%, 27%, 40%, 5%)

Oklch

oklch(81.0% 0.088 47.2)

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

#FDD3A3

Goose Yellow · Wheat · Peach Orange

HEX

#FDD3A3

RGB

rgb(253, 211, 163)

HSL

hsl(32, 96%, 82%)

HSB

hsb(32, 36%, 99%)

CMYK

cmyk(0%, 17%, 36%, 1%)

Oklch

oklch(89.2% 0.078 70.3)

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

#F9E9C8

Goose Yellow · Bisque · Lemon Cream

HEX

#F9E9C8

RGB

rgb(249, 233, 200)

HSL

hsl(40, 80%, 88%)

HSB

hsb(40, 20%, 98%)

CMYK

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

Oklch

oklch(93.8% 0.047 85.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

887F75

757F8A

Analogous

8A7675

887F75

898A75

Triadic

887F75

758A80

80758A

Split-Comp.

887F75

75898A

76758A

Tetradic

887F75

758A76

757F8A

8A7589

Contrast Matrix WCAG 2.1 Contrast

887F75	C69187	F1B090	FDD3A3	F9E9C8
—	1.5 Fail	2.1 Fail	2.8 Fail	3.3 AA Large
1.5 Fail	—	1.5 Fail	1.9 Fail	2.2 Fail
2.1 Fail	1.5 Fail	—	1.3 Fail	1.5 Fail
2.8 Fail	1.9 Fail	1.3 Fail	—	1.2 Fail
3.3 AA Large	2.2 Fail	1.5 Fail	1.2 Fail	—

White BG

3.9AA Large

2.7Fail

1.8Fail

1.4Fail

1.2Fail

Black BG

5.3AA

7.8AAA

11.4AAA

15.0AAA

17.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

848477

AFAF89

D5D498

EBEAAF

F2F2D0

Deuteranopia

858578

B2B68A

D9DE9A

EDF0B1

F3F4D2

Tritanopia

88797A

C38B8C

EE9E9F

FBB8BA

F8D6D8

Achromatopsia

818181

A0A0A0

C0C0C0

DADADA

EAEAEA

Shades & Tints Shades & Tints

#887F75

Dark

Light

#C69187

Dark

Light

#F1B090

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #887f75;
  --color-2: #c69187;
  --color-3: #f1b090;
  --color-4: #fdd3a3;
  --color-5: #f9e9c8;
}

SCSS

$color-1: #887f75;
$color-2: #c69187;
$color-3: #f1b090;
$color-4: #fdd3a3;
$color-5: #f9e9c8;

TAILWIND

colors: {
  'brand-1': '#887f75',
  'brand-2': '#c69187',
  'brand-3': '#f1b090',
  'brand-4': '#fdd3a3',
  'brand-5': '#f9e9c8',
}

RGB Array

[136, 127, 117], [198, 145, 135], [241, 176, 144], [253, 211, 163], [249, 233, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #887F75, #C69187, #F1B090, #FDD3A3, #F9E9C8 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: #887f75; --color-2: #c69187; --color-3: #f1b090; --color-4: #fdd3a3; --color-5: #f9e9c8. 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 cool-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