← Back to Editor

#8ABFA3 · #5B6D76 · #E65B4D · #EB885F · #EBB16B

cool

A 5-color cool 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

#8ABFA3

Celadon · DarkSeaGreen · Apple Green

HEX
#8ABFA3
RGB
rgb(138, 191, 163)
HSL
hsl(148, 29%, 65%)
HSB
hsb(148, 28%, 75%)
CMYK
cmyk(28%, 0%, 15%, 25%)
Oklch
oklch(76.0% 0.069 161.1)

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

#5B6D76

Slate Blue · DimGray · Navy Blue

HEX
#5B6D76
RGB
rgb(91, 109, 118)
HSL
hsl(200, 13%, 41%)
HSB
hsb(200, 23%, 46%)
CMYK
cmyk(23%, 8%, 0%, 54%)
Oklch
oklch(52.3% 0.026 229.5)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#E65B4D

Vermilion · Tomato · Passion Red

HEX
#E65B4D
RGB
rgb(230, 91, 77)
HSL
hsl(5, 75%, 60%)
HSB
hsb(5, 67%, 90%)
CMYK
cmyk(0%, 60%, 67%, 10%)
Oklch
oklch(64.9% 0.176 28.6)

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

#EB885F

Apricot · Salmon · Warm Sun

HEX
#EB885F
RGB
rgb(235, 136, 95)
HSL
hsl(18, 78%, 65%)
HSB
hsb(18, 60%, 92%)
CMYK
cmyk(0%, 42%, 60%, 8%)
Oklch
oklch(72.5% 0.133 42.8)

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

#EBB16B

Ginger · SandyBrown · Warm Sun

HEX
#EBB16B
RGB
rgb(235, 177, 107)
HSL
hsl(33, 76%, 67%)
HSB
hsb(33, 54%, 92%)
CMYK
cmyk(0%, 25%, 54%, 8%)
Oklch
oklch(80.0% 0.111 70.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8ABFA3
C08CA7

Analogous

8EC08C
8ABFA3
8CC0BE

Triadic

8ABFA3
A48CC0
C0A48C

Split-Comp.

8ABFA3
BE8CC0
C08C8E

Tetradic

8ABFA3
8C8EC0
C08CA7
C0BE8C

Contrast Matrix WCAG 2.1 Contrast

8ABFA3
5B6D76
E65B4D
EB885F
EBB16B
—
2.6
Fail
1.7
Fail
1.2
Fail
1.1
Fail
2.6
Fail
—
1.5
Fail
2.1
Fail
2.8
Fail
1.7
Fail
1.5
Fail
—
1.4
Fail
1.8
Fail
1.2
Fail
2.1
Fail
1.4
Fail
—
1.3
Fail
1.1
Fail
2.8
Fail
1.8
Fail
1.3
Fail
—
White BG
2.1Fail
5.4AA
3.5AA Large
2.6Fail
1.9Fail
Black BG
10.1AAA
3.9AA Large
6.0AA
8.2AAA
11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A1AA
636374
AAA950
C0BF69
D2D17C

Deuteranopia

9E9AAB
626073
B2BC51
C6CD6B
D5DA80

Tritanopia

8DAFB0
5C7272
DF5354
E67172
E8898C

Achromatopsia

ACACAC
696969
838383
A1A1A1
BABABA

Shades & Tints Shades & Tints

#8ABFA3

Dark
Light

#5B6D76

Dark
Light

#E65B4D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8abfa3;
  --color-2: #5b6d76;
  --color-3: #e65b4d;
  --color-4: #eb885f;
  --color-5: #ebb16b;
}

SCSS

$color-1: #8abfa3;
$color-2: #5b6d76;
$color-3: #e65b4d;
$color-4: #eb885f;
$color-5: #ebb16b;

TAILWIND

colors: {
  'brand-1': '#8abfa3',
  'brand-2': '#5b6d76',
  'brand-3': '#e65b4d',
  'brand-4': '#eb885f',
  'brand-5': '#ebb16b',
}

RGB Array

[138, 191, 163], [91, 109, 118], [230, 91, 77], [235, 136, 95], [235, 177, 107]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #8ABFA3, #5B6D76, #E65B4D, #EB885F, #EBB16B 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: #8abfa3; --color-2: #5b6d76; --color-3: #e65b4d; --color-4: #eb885f; --color-5: #ebb16b. 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 cool-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