← Back to Editor

#80BD9E · #385865 · #1E2A44 · #B9B87F · #D4EABC

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 LibraryData Visualization

Color Details Color Details

#80BD9E

Jade · DarkSeaGreen · Apple Green

HEX
#80BD9E
RGB
rgb(128, 189, 158)
HSL
hsl(150, 32%, 62%)
HSB
hsb(150, 32%, 74%)
CMYK
cmyk(32%, 0%, 16%, 26%)
Oklch
oklch(74.8% 0.078 161.6)

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

#385865

Slate Blue · DarkSlateGray · Mint Ice

HEX
#385865
RGB
rgb(56, 88, 101)
HSL
hsl(197, 29%, 31%)
HSB
hsb(197, 45%, 40%)
CMYK
cmyk(45%, 13%, 0%, 60%)
Oklch
oklch(44.1% 0.043 225.5)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#1E2A44

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#1E2A44
RGB
rgb(30, 42, 68)
HSL
hsl(221, 39%, 19%)
HSB
hsb(221, 56%, 27%)
CMYK
cmyk(56%, 38%, 0%, 73%)
Oklch
oklch(28.8% 0.051 264.6)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#B9B87F

Fresh Green · Tan · Sunflower

HEX
#B9B87F
RGB
rgb(185, 184, 127)
HSL
hsl(59, 29%, 61%)
HSB
hsb(59, 31%, 73%)
CMYK
cmyk(0%, 1%, 31%, 27%)
Oklch
oklch(77.0% 0.076 107.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D4EABC

Willow Green · LightGray · Mint Green

HEX
#D4EABC
RGB
rgb(212, 234, 188)
HSL
hsl(89, 52%, 83%)
HSB
hsb(89, 20%, 92%)
CMYK
cmyk(9%, 0%, 20%, 8%)
Oklch
oklch(90.9% 0.065 128.5)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

80BD9E
BD7F9E

Analogous

7FBD7F
80BD9E
7FBDBD

Triadic

80BD9E
9E7FBD
BD9E7F

Split-Comp.

80BD9E
BD7FBD
BD7F7F

Tetradic

80BD9E
7F7FBD
BD7F9E
BDBD7F

Contrast Matrix WCAG 2.1 Contrast

80BD9E
385865
1E2A44
B9B87F
D4EABC
—
3.5
AA Large
6.6
AA
1.1
Fail
1.7
Fail
3.5
AA Large
—
1.9
Fail
3.7
AA Large
5.9
AA
6.6
AA
1.9
Fail
—
7.0
AA
11.1
AAA
1.1
Fail
3.7
AA Large
7.0
AA
—
1.6
Fail
1.7
Fail
5.9
AA
11.1
AAA
1.6
Fail
—
White BG
2.2Fail
7.6AAA
14.3AAA
2.1Fail
1.3Fail
Black BG
9.7AAA
2.8Fail
1.5Fail
10.2AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9BA6
464662
23233E
B9B98D
DEDEC7

Deuteranopia

9792A7
444261
23223C
B9B990
DCDBCA

Tritanopia

83ABAD
3A5F5F
1F3938
B9989A
D5D0D2

Achromatopsia

A7A7A7
505050
292929
B2B2B2
DEDEDE

Shades & Tints Shades & Tints

#80BD9E

Dark
Light

#385865

Dark
Light

#1E2A44

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #80bd9e;
  --color-2: #385865;
  --color-3: #1e2a44;
  --color-4: #b9b87f;
  --color-5: #d4eabc;
}

SCSS

$color-1: #80bd9e;
$color-2: #385865;
$color-3: #1e2a44;
$color-4: #b9b87f;
$color-5: #d4eabc;

TAILWIND

colors: {
  'brand-1': '#80bd9e',
  'brand-2': '#385865',
  'brand-3': '#1e2a44',
  'brand-4': '#b9b87f',
  'brand-5': '#d4eabc',
}

RGB Array

[128, 189, 158], [56, 88, 101], [30, 42, 68], [185, 184, 127], [212, 234, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #80BD9E, #385865, #1E2A44, #B9B87F, #D4EABC is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #80bd9e; --color-2: #385865; --color-3: #1e2a44; --color-4: #b9b87f; --color-5: #d4eabc. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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