← Back to Editor

#87E3CE · #84BD9A · #798869 · #9B5263 · #96284D

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

#87E3CE

Jade · SkyBlue · Lake Green

HEX
#87E3CE
RGB
rgb(135, 227, 206)
HSL
hsl(166, 62%, 71%)
HSB
hsb(166, 41%, 89%)
CMYK
cmyk(41%, 0%, 9%, 11%)
Oklch
oklch(85.2% 0.094 177.6)

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

#84BD9A

Celadon · DarkSeaGreen · Apple Green

HEX
#84BD9A
RGB
rgb(132, 189, 154)
HSL
hsl(143, 30%, 63%)
HSB
hsb(143, 30%, 74%)
CMYK
cmyk(30%, 0%, 19%, 26%)
Oklch
oklch(74.9% 0.078 157.0)

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

#798869

Grass Green · Gray · Olive Green

HEX
#798869
RGB
rgb(121, 136, 105)
HSL
hsl(89, 13%, 47%)
HSB
hsb(89, 23%, 53%)
CMYK
cmyk(11%, 0%, 23%, 47%)
Oklch
oklch(60.6% 0.049 128.8)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#9B5263

Crimson · Sienna · Passion Red

HEX
#9B5263
RGB
rgb(155, 82, 99)
HSL
hsl(346, 31%, 46%)
HSB
hsb(346, 47%, 61%)
CMYK
cmyk(0%, 47%, 36%, 39%)
Oklch
oklch(53.1% 0.098 6.1)

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

#96284D

Dark Violet · Brown · Camellia

HEX
#96284D
RGB
rgb(150, 40, 77)
HSL
hsl(340, 58%, 37%)
HSB
hsb(340, 73%, 59%)
CMYK
cmyk(0%, 73%, 49%, 41%)
Oklch
oklch(45.9% 0.147 4.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87E3CE
E3879D

Analogous

87E3A0
87E3CE
87CAE3

Triadic

87E3CE
CE87E3
E3CE87

Split-Comp.

87E3CE
E387CA
E3A087

Tetradic

87E3CE
A087E3
E3879D
CAE387

Contrast Matrix WCAG 2.1 Contrast

87E3CE
84BD9A
798869
9B5263
96284D
—
1.4
Fail
2.5
Fail
3.7
AA Large
5.1
AA
1.4
Fail
—
1.8
Fail
2.6
Fail
3.6
AA Large
2.5
Fail
1.8
Fail
—
1.5
Fail
2.0
Fail
3.7
AA Large
2.6
Fail
1.5
Fail
—
1.4
Fail
5.1
AA
3.6
AA Large
2.0
Fail
1.4
Fail
—
White BG
1.5Fail
2.2Fail
3.8AA Large
5.6AA
7.8AAA
Black BG
13.9AAA
9.7AAA
5.5AA
3.8AA Large
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFB0D3
9D9DA2
7F8071
7B7B5F
666544

Deuteranopia

AAA3D4
9995A5
7F7D72
80855E
6D7542

Tritanopia

8CD7D8
87A9AB
7A7678
975C5B
913D3B

Achromatopsia

C5C5C5
A8A8A8
808080
6A6A6A
4D4D4D

Shades & Tints Shades & Tints

#87E3CE

Dark
Light

#84BD9A

Dark
Light

#798869

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87e3ce;
  --color-2: #84bd9a;
  --color-3: #798869;
  --color-4: #9b5263;
  --color-5: #96284d;
}

SCSS

$color-1: #87e3ce;
$color-2: #84bd9a;
$color-3: #798869;
$color-4: #9b5263;
$color-5: #96284d;

TAILWIND

colors: {
  'brand-1': '#87e3ce',
  'brand-2': '#84bd9a',
  'brand-3': '#798869',
  'brand-4': '#9b5263',
  'brand-5': '#96284d',
}

RGB Array

[135, 227, 206], [132, 189, 154], [121, 136, 105], [155, 82, 99], [150, 40, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87E3CE, #84BD9A, #798869, #9B5263, #96284D 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: #87e3ce; --color-2: #84bd9a; --color-3: #798869; --color-4: #9b5263; --color-5: #96284d. 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