← Back to Editor

#86CFB9 · #B8CCA7 · #BCA070 · #DE746F · #89625B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#86CFB9

Jade · MediumAquaMarine · Lake Green

HEX
#86CFB9
RGB
rgb(134, 207, 185)
HSL
hsl(162, 43%, 67%)
HSB
hsb(162, 35%, 81%)
CMYK
cmyk(35%, 0%, 11%, 19%)
Oklch
oklch(80.0% 0.080 173.2)

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

#B8CCA7

Celadon · Silver · Apple Green

HEX
#B8CCA7
RGB
rgb(184, 204, 167)
HSL
hsl(92, 27%, 73%)
HSB
hsb(92, 18%, 80%)
CMYK
cmyk(10%, 0%, 18%, 20%)
Oklch
oklch(82.0% 0.055 130.7)

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

#BCA070

Ginger · Tan · Warm Sun

HEX
#BCA070
RGB
rgb(188, 160, 112)
HSL
hsl(38, 36%, 59%)
HSB
hsb(38, 40%, 74%)
CMYK
cmyk(0%, 15%, 40%, 26%)
Oklch
oklch(71.9% 0.072 80.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#DE746F

Peach Pink · LightCoral · Coral Red

HEX
#DE746F
RGB
rgb(222, 116, 111)
HSL
hsl(3, 63%, 65%)
HSB
hsb(3, 50%, 87%)
CMYK
cmyk(0%, 48%, 50%, 13%)
Oklch
oklch(67.9% 0.133 24.0)

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

#89625B

Crimson · DimGray · Passion Red

HEX
#89625B
RGB
rgb(137, 98, 91)
HSL
hsl(9, 20%, 45%)
HSB
hsb(9, 34%, 54%)
CMYK
cmyk(0%, 28%, 34%, 46%)
Oklch
oklch(53.5% 0.052 30.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86CFB9
CF879C

Analogous

87CF95
86CFB9
87C1CF

Triadic

86CFB9
B987CF
CFB987

Split-Comp.

86CFB9
CF87C1
CF9587

Tetradic

86CFB9
9587CF
CF879C
C1CF87

Contrast Matrix WCAG 2.1 Contrast

86CFB9
B8CCA7
BCA070
DE746F
89625B
—
1.1
Fail
1.4
Fail
1.7
Fail
2.9
Fail
1.1
Fail
—
1.5
Fail
1.8
Fail
3.1
AA Large
1.4
Fail
1.5
Fail
—
1.2
Fail
2.1
Fail
1.7
Fail
1.8
Fail
1.2
Fail
—
1.7
Fail
2.9
Fail
3.1
AA Large
2.1
Fail
1.7
Fail
—
White BG
1.8Fail
1.7Fail
2.5Fail
3.1AA Large
5.3AA
Black BG
11.6AAA
12.2AAA
8.4AAA
6.8AA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A6BE
C1C1B0
B0B07C
B0AF70
78785D

Deuteranopia

A19CC0
C0BEB2
B2B47E
B6BE70
7A7D5D

Tritanopia

8AC3C3
B9B7B9
BB8587
D97171
875E5E

Achromatopsia

B7B7B7
C2C2C2
A3A3A3
939393
6D6D6D

Shades & Tints Shades & Tints

#86CFB9

Dark
Light

#B8CCA7

Dark
Light

#BCA070

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86cfb9;
  --color-2: #b8cca7;
  --color-3: #bca070;
  --color-4: #de746f;
  --color-5: #89625b;
}

SCSS

$color-1: #86cfb9;
$color-2: #b8cca7;
$color-3: #bca070;
$color-4: #de746f;
$color-5: #89625b;

TAILWIND

colors: {
  'brand-1': '#86cfb9',
  'brand-2': '#b8cca7',
  'brand-3': '#bca070',
  'brand-4': '#de746f',
  'brand-5': '#89625b',
}

RGB Array

[134, 207, 185], [184, 204, 167], [188, 160, 112], [222, 116, 111], [137, 98, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86CFB9, #B8CCA7, #BCA070, #DE746F, #89625B is ideal for: corporate websites, product showcases, portfolios. 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: #86cfb9; --color-2: #b8cca7; --color-3: #bca070; --color-4: #de746f; --color-5: #89625b. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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