#86BEC3 + #BBA9B4 + #DF9B9A + #FF947D + #838878 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#86BEC3

Sky Blue · SkyBlue · Lake Green

HEX

#86BEC3

RGB

rgb(134, 190, 195)

HSL

hsl(185, 34%, 65%)

HSB

hsb(185, 31%, 76%)

CMYK

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

Oklch

oklch(76.5% 0.058 203.0)

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

#BBA9B4

Mauve · DarkGray · Rose Pink

HEX

#BBA9B4

RGB

rgb(187, 169, 180)

HSL

hsl(323, 12%, 70%)

HSB

hsb(323, 10%, 73%)

CMYK

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

Oklch

oklch(75.3% 0.026 340.5)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#DF9B9A

Peach Pink · Tan · Coral Red

HEX

#DF9B9A

RGB

rgb(223, 155, 154)

HSL

hsl(1, 52%, 74%)

HSB

hsb(1, 31%, 87%)

CMYK

cmyk(0%, 30%, 31%, 13%)

Oklch

oklch(75.5% 0.082 20.1)

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

#FF947D

Peach Pink · LightSalmon · Coral Red

HEX

#FF947D

RGB

rgb(255, 148, 125)

HSL

hsl(11, 100%, 75%)

HSB

hsb(11, 51%, 100%)

CMYK

cmyk(0%, 42%, 51%, 0%)

Oklch

oklch(77.4% 0.134 33.1)

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

#838878

Ink Gray · Gray · Warm Gray

HEX

#838878

RGB

rgb(131, 136, 120)

HSL

hsl(79, 6%, 50%)

HSB

hsb(79, 12%, 53%)

CMYK

cmyk(4%, 0%, 12%, 47%)

Oklch

oklch(61.8% 0.024 121.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86BEC3

C48C87

Analogous

87C4AB

86BEC3

87A1C4

Triadic

86BEC3

C487BF

BFC487

Split-Comp.

86BEC3

C487A1

C4AB87

Tetradic

86BEC3

AB87C4

C48C87

A1C487

Contrast Matrix WCAG 2.1 Contrast

86BEC3	BBA9B4	DF9B9A	FF947D	838878
—	1.1 Fail	1.1 Fail	1.0 Fail	1.8 Fail
1.1 Fail	—	1.0 Fail	1.0 Fail	1.6 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	1.6 Fail
1.0 Fail	1.0 Fail	1.1 Fail	—	1.7 Fail
1.8 Fail	1.6 Fail	1.6 Fail	1.7 Fail	—

White BG

2.1Fail

2.2Fail

2.3Fail

2.1Fail

3.6AA Large

Black BG

10.2AAA

9.4AAA

9.3AAA

9.8AAA

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9FC2

B3B3B1

C2C19A

D1D083

85857C

Deuteranopia

9B97C2

B4B6B1

C6CB9A

D7DF84

85857D

Tritanopia

89C1C1

BAAFAF

DC9A9A

FA8788

837F80

Achromatopsia

AEAEAE

B0B0B0

AFAFAF

B1B1B1

858585

Shades & Tints Shades & Tints

#86BEC3

Dark

Light

#BBA9B4

Dark

Light

#DF9B9A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86bec3;
  --color-2: #bba9b4;
  --color-3: #df9b9a;
  --color-4: #ff947d;
  --color-5: #838878;
}

SCSS

$color-1: #86bec3;
$color-2: #bba9b4;
$color-3: #df9b9a;
$color-4: #ff947d;
$color-5: #838878;

TAILWIND

colors: {
  'brand-1': '#86bec3',
  'brand-2': '#bba9b4',
  'brand-3': '#df9b9a',
  'brand-4': '#ff947d',
  'brand-5': '#838878',
}

RGB Array

[134, 190, 195], [187, 169, 180], [223, 155, 154], [255, 148, 125], [131, 136, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86BEC3, #BBA9B4, #DF9B9A, #FF947D, #838878 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: #86bec3; --color-2: #bba9b4; --color-3: #df9b9a; --color-4: #ff947d; --color-5: #838878. 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