← Back to Editor

#87CBCA · #AAC96B · #E28B5E · #DC3E6F · #4A393F

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

#87CBCA

Jade · SkyBlue · Lake Green

HEX
#87CBCA
RGB
rgb(135, 203, 202)
HSL
hsl(179, 40%, 66%)
HSB
hsb(179, 33%, 80%)
CMYK
cmyk(33%, 0%, 0%, 20%)
Oklch
oklch(79.7% 0.069 194.7)

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

#AAC96B

Grass Green · DarkSeaGreen · Olive Green

HEX
#AAC96B
RGB
rgb(170, 201, 107)
HSL
hsl(80, 47%, 60%)
HSB
hsb(80, 47%, 79%)
CMYK
cmyk(15%, 0%, 47%, 21%)
Oklch
oklch(79.2% 0.126 124.2)

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

#E28B5E

Apricot · SandyBrown · Warm Sun

HEX
#E28B5E
RGB
rgb(226, 139, 94)
HSL
hsl(20, 69%, 63%)
HSB
hsb(20, 58%, 89%)
CMYK
cmyk(0%, 38%, 58%, 11%)
Oklch
oklch(71.8% 0.122 47.5)

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

#DC3E6F

Dark Violet · MediumVioletRed · Rose Pink

HEX
#DC3E6F
RGB
rgb(220, 62, 111)
HSL
hsl(341, 69%, 55%)
HSB
hsb(341, 72%, 86%)
CMYK
cmyk(0%, 72%, 50%, 14%)
Oklch
oklch(60.8% 0.196 6.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#4A393F

Dark Violet · DarkSlateGray · Camellia

HEX
#4A393F
RGB
rgb(74, 57, 63)
HSL
hsl(339, 13%, 26%)
HSB
hsb(339, 23%, 29%)
CMYK
cmyk(0%, 23%, 15%, 71%)
Oklch
oklch(36.5% 0.026 355.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87CBCA
CB8687

Analogous

86CBA7
87CBCA
86A9CB

Triadic

87CBCA
CA86CB
CBCA86

Split-Comp.

87CBCA
CB86A9
CBA786

Tetradic

87CBCA
A786CB
CB8687
A9CB86

Contrast Matrix WCAG 2.1 Contrast

87CBCA
AAC96B
E28B5E
DC3E6F
4A393F
—
1.0
Fail
1.4
Fail
2.3
Fail
5.9
AA
1.0
Fail
—
1.4
Fail
2.3
Fail
5.8
AA
1.4
Fail
1.4
Fail
—
1.6
Fail
4.2
AA Large
2.3
Fail
2.3
Fail
1.6
Fail
—
2.5
Fail
5.9
AA
5.8
AA
4.2
AA Large
2.5
Fail
—
White BG
1.8Fail
1.9Fail
2.6Fail
4.2AA Large
10.8AAA
Black BG
11.4AAA
11.3AAA
8.1AAA
5.0AA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A5CA
B7B882
BCBC69
989663
43423E

Deuteranopia

A19BCA
B6B387
C1C86C
A1AD60
44453D

Tritanopia

8ACACA
AC9498
DE7173
D45A58
493C3C

Achromatopsia

B7B7B7
B5B5B5
A0A0A0
737373
3F3F3F

Shades & Tints Shades & Tints

#87CBCA

Dark
Light

#AAC96B

Dark
Light

#E28B5E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87cbca;
  --color-2: #aac96b;
  --color-3: #e28b5e;
  --color-4: #dc3e6f;
  --color-5: #4a393f;
}

SCSS

$color-1: #87cbca;
$color-2: #aac96b;
$color-3: #e28b5e;
$color-4: #dc3e6f;
$color-5: #4a393f;

TAILWIND

colors: {
  'brand-1': '#87cbca',
  'brand-2': '#aac96b',
  'brand-3': '#e28b5e',
  'brand-4': '#dc3e6f',
  'brand-5': '#4a393f',
}

RGB Array

[135, 203, 202], [170, 201, 107], [226, 139, 94], [220, 62, 111], [74, 57, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87CBCA, #AAC96B, #E28B5E, #DC3E6F, #4A393F 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: #87cbca; --color-2: #aac96b; --color-3: #e28b5e; --color-4: #dc3e6f; --color-5: #4a393f. 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