← Back to Editor

#D0F6DA · #89D9B5 · #6A788C · #4F476B · #403951

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D0F6DA

Emerald · LightGray · Mint Green

HEX
#D0F6DA
RGB
rgb(208, 246, 218)
HSL
hsl(136, 68%, 89%)
HSB
hsb(136, 15%, 96%)
CMYK
cmyk(15%, 0%, 11%, 4%)
Oklch
oklch(93.9% 0.054 153.3)

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

#89D9B5

Jade · MediumAquaMarine · Apple Green

HEX
#89D9B5
RGB
rgb(137, 217, 181)
HSL
hsl(153, 51%, 69%)
HSB
hsb(153, 37%, 85%)
CMYK
cmyk(37%, 0%, 17%, 15%)
Oklch
oklch(82.4% 0.094 164.1)

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

#6A788C

Indigo · SlateGray · Navy Blue

HEX
#6A788C
RGB
rgb(106, 120, 140)
HSL
hsl(215, 14%, 48%)
HSB
hsb(215, 24%, 55%)
CMYK
cmyk(24%, 14%, 0%, 45%)
Oklch
oklch(56.8% 0.035 257.3)

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

#4F476B

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#4F476B
RGB
rgb(79, 71, 107)
HSL
hsl(253, 20%, 35%)
HSB
hsb(253, 34%, 42%)
CMYK
cmyk(26%, 34%, 0%, 58%)
Oklch
oklch(42.1% 0.060 293.9)

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

#403951

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#403951
RGB
rgb(64, 57, 81)
HSL
hsl(258, 17%, 27%)
HSB
hsb(258, 30%, 32%)
CMYK
cmyk(21%, 30%, 0%, 68%)
Oklch
oklch(36.2% 0.042 297.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D0F6DA
F6D0EC

Analogous

D9F6D0
D0F6DA
D0F6ED

Triadic

D0F6DA
DAD0F6
F6DAD0

Split-Comp.

D0F6DA
EDD0F6
F6D0D9

Tetradic

D0F6DA
D0D9F6
F6D0EC
F6EDD0

Contrast Matrix WCAG 2.1 Contrast

D0F6DA
89D9B5
6A788C
4F476B
403951
—
1.4
Fail
3.8
AA Large
7.3
AAA
9.3
AAA
1.4
Fail
—
2.7
Fail
5.2
AA
6.6
AA
3.8
AA Large
2.7
Fail
—
1.9
Fail
2.4
Fail
7.3
AAA
5.2
AA
1.9
Fail
—
1.3
Fail
9.3
AAA
6.6
AA
2.4
Fail
1.3
Fail
—
White BG
1.2Fail
1.7Fail
4.5AA Large
8.6AAA
10.9AAA
Black BG
17.9AAA
12.7AAA
4.7AA
2.4Fail
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E1E1
ACACBE
707087
4C4B62
3D3D4B

Deuteranopia

DEDBE2
A7A1C0
6F6E86
4C4D60
3D3E4A

Tritanopia

D2E6E7
8DC5C6
6B8383
4F5B5A
404746

Achromatopsia

E7E7E7
BDBDBD
767676
4D4D4D
3E3E3E

Shades & Tints Shades & Tints

#D0F6DA

Dark
Light

#89D9B5

Dark
Light

#6A788C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d0f6da;
  --color-2: #89d9b5;
  --color-3: #6a788c;
  --color-4: #4f476b;
  --color-5: #403951;
}

SCSS

$color-1: #d0f6da;
$color-2: #89d9b5;
$color-3: #6a788c;
$color-4: #4f476b;
$color-5: #403951;

TAILWIND

colors: {
  'brand-1': '#d0f6da',
  'brand-2': '#89d9b5',
  'brand-3': '#6a788c',
  'brand-4': '#4f476b',
  'brand-5': '#403951',
}

RGB Array

[208, 246, 218], [137, 217, 181], [106, 120, 140], [79, 71, 107], [64, 57, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D0F6DA, #89D9B5, #6A788C, #4F476B, #403951 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: #d0f6da; --color-2: #89d9b5; --color-3: #6a788c; --color-4: #4f476b; --color-5: #403951. 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