#86AFB1 + #E7D8C3 + #E2BEAE + #D6ADB5 + #BD999D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#86AFB1

Sky Blue · DarkGray · Lake Green

HEX

#86AFB1

RGB

rgb(134, 175, 177)

HSL

hsl(183, 22%, 61%)

HSB

hsb(183, 24%, 69%)

CMYK

cmyk(24%, 1%, 0%, 31%)

Oklch

oklch(72.5% 0.044 200.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#E7D8C3

Goose Yellow · Wheat · Peach Orange

HEX

#E7D8C3

RGB

rgb(231, 216, 195)

HSL

hsl(35, 43%, 84%)

HSB

hsb(35, 16%, 91%)

CMYK

cmyk(0%, 6%, 16%, 9%)

Oklch

oklch(88.9% 0.033 76.4)

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

#E2BEAE

Apricot · LightPink · Peach Orange

HEX

#E2BEAE

RGB

rgb(226, 190, 174)

HSL

hsl(18, 47%, 78%)

HSB

hsb(18, 23%, 89%)

CMYK

cmyk(0%, 16%, 23%, 11%)

Oklch

oklch(82.8% 0.047 45.3)

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

#D6ADB5

Peach Pink · Silver · Coral Red

HEX

#D6ADB5

RGB

rgb(214, 173, 181)

HSL

hsl(348, 33%, 76%)

HSB

hsb(348, 19%, 84%)

CMYK

cmyk(0%, 19%, 15%, 16%)

Oklch

oklch(78.7% 0.049 5.1)

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

#BD999D

Peach Pink · DarkGray · Coral Red

HEX

#BD999D

RGB

rgb(189, 153, 157)

HSL

hsl(353, 21%, 67%)

HSB

hsb(353, 19%, 74%)

CMYK

cmyk(0%, 19%, 17%, 26%)

Oklch

oklch(71.7% 0.043 10.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86AFB1

B18886

Analogous

86B19E

86AFB1

8699B1

Triadic

86AFB1

B186AF

AFB186

Split-Comp.

86AFB1

B18699

B19E86

Tetradic

86AFB1

9E86B1

B18886

99B186

Contrast Matrix WCAG 2.1 Contrast

86AFB1	E7D8C3	E2BEAE	D6ADB5	BD999D
—	1.7 Fail	1.4 Fail	1.2 Fail	1.1 Fail
1.7 Fail	—	1.2 Fail	1.4 Fail	1.8 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.2 Fail	1.4 Fail	1.2 Fail	—	1.3 Fail
1.1 Fail	1.8 Fail	1.5 Fail	1.3 Fail	—

White BG

2.4Fail

1.4Fail

1.7Fail

2.0Fail

2.6Fail

Black BG

8.8AAA

15.0AAA

12.2AAA

10.5AAA

8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9898B1

E1E0C8

D2D2B2

C4C4B3

ADAD9C

Deuteranopia

9592B0

E1E3C9

D5D7B3

C7CAB3

B0B29C

Tritanopia

88B0B0

E6CCCD

E0B5B6

D4B2B1

BB9B9B

Achromatopsia

A3A3A3

DADADA

C7C7C7

BABABA

A4A4A4

Shades & Tints Shades & Tints

#86AFB1

Dark

Light

#E7D8C3

Dark

Light

#E2BEAE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86afb1;
  --color-2: #e7d8c3;
  --color-3: #e2beae;
  --color-4: #d6adb5;
  --color-5: #bd999d;
}

SCSS

$color-1: #86afb1;
$color-2: #e7d8c3;
$color-3: #e2beae;
$color-4: #d6adb5;
$color-5: #bd999d;

TAILWIND

colors: {
  'brand-1': '#86afb1',
  'brand-2': '#e7d8c3',
  'brand-3': '#e2beae',
  'brand-4': '#d6adb5',
  'brand-5': '#bd999d',
}

RGB Array

[134, 175, 177], [231, 216, 195], [226, 190, 174], [214, 173, 181], [189, 153, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86AFB1, #E7D8C3, #E2BEAE, #D6ADB5, #BD999D 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: #86afb1; --color-2: #e7d8c3; --color-3: #e2beae; --color-4: #d6adb5; --color-5: #bd999d. 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