← Back to Editor

#87B0A4 · #CFB3A5 · #EBB8A2 · #F7DDD2 · #BDCFB2

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#87B0A4

Jade · DarkSeaGreen · Lake Green

HEX
#87B0A4
RGB
rgb(135, 176, 164)
HSL
hsl(162, 21%, 61%)
HSB
hsb(162, 23%, 69%)
CMYK
cmyk(23%, 0%, 7%, 31%)
Oklch
oklch(72.4% 0.048 175.0)

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

#CFB3A5

Apricot · Tan · Warm Sun

HEX
#CFB3A5
RGB
rgb(207, 179, 165)
HSL
hsl(20, 30%, 73%)
HSB
hsb(20, 20%, 81%)
CMYK
cmyk(0%, 14%, 20%, 19%)
Oklch
oklch(78.7% 0.038 48.2)

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

#EBB8A2

Apricot · BurlyWood · Peach Orange

HEX
#EBB8A2
RGB
rgb(235, 184, 162)
HSL
hsl(18, 65%, 78%)
HSB
hsb(18, 31%, 92%)
CMYK
cmyk(0%, 22%, 31%, 8%)
Oklch
oklch(82.3% 0.067 44.5)

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

#F7DDD2

Apricot · Bisque · Peach Orange

HEX
#F7DDD2
RGB
rgb(247, 221, 210)
HSL
hsl(18, 70%, 90%)
HSB
hsb(18, 15%, 97%)
CMYK
cmyk(0%, 11%, 15%, 3%)
Oklch
oklch(91.6% 0.033 44.4)

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

#BDCFB2

Celadon · Silver · Apple Green

HEX
#BDCFB2
RGB
rgb(189, 207, 178)
HSL
hsl(97, 23%, 75%)
HSB
hsb(97, 14%, 81%)
CMYK
cmyk(9%, 0%, 14%, 19%)
Oklch
oklch(83.3% 0.044 133.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87B0A4
B08793

Analogous

87B08F
87B0A4
87A8B0

Triadic

87B0A4
A487B0
B0A487

Split-Comp.

87B0A4
B087A8
B08F87

Tetradic

87B0A4
8F87B0
B08793
A8B087

Contrast Matrix WCAG 2.1 Contrast

87B0A4
CFB3A5
EBB8A2
F7DDD2
BDCFB2
—
1.2
Fail
1.4
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
1.1
Fail
1.5
Fail
1.2
Fail
1.4
Fail
1.1
Fail
—
1.4
Fail
1.1
Fail
1.8
Fail
1.5
Fail
1.4
Fail
—
1.3
Fail
1.5
Fail
1.2
Fail
1.1
Fail
1.3
Fail
—
White BG
2.4Fail
2.0Fail
1.8Fail
1.3Fail
1.6Fail
Black BG
8.8AAA
10.6AAA
11.9AAA
16.2AAA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9999A7
C3C3A8
D5D4A7
ECECD5
C5C5B9

Deuteranopia

9693A8
C5C7A9
D8DCA9
EDEFD5
C4C2BB

Tritanopia

89A9AA
CEABAC
E8ACAC
F6D7D7
BEBFC0

Achromatopsia

A2A2A2
BABABA
C5C5C5
E4E4E4
C6C6C6

Shades & Tints Shades & Tints

#87B0A4

Dark
Light

#CFB3A5

Dark
Light

#EBB8A2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87b0a4;
  --color-2: #cfb3a5;
  --color-3: #ebb8a2;
  --color-4: #f7ddd2;
  --color-5: #bdcfb2;
}

SCSS

$color-1: #87b0a4;
$color-2: #cfb3a5;
$color-3: #ebb8a2;
$color-4: #f7ddd2;
$color-5: #bdcfb2;

TAILWIND

colors: {
  'brand-1': '#87b0a4',
  'brand-2': '#cfb3a5',
  'brand-3': '#ebb8a2',
  'brand-4': '#f7ddd2',
  'brand-5': '#bdcfb2',
}

RGB Array

[135, 176, 164], [207, 179, 165], [235, 184, 162], [247, 221, 210], [189, 207, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87B0A4, #CFB3A5, #EBB8A2, #F7DDD2, #BDCFB2 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: #87b0a4; --color-2: #cfb3a5; --color-3: #ebb8a2; --color-4: #f7ddd2; --color-5: #bdcfb2. 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