← Back to Editor

#D0EBB7 · #8CC3A7 · #7BBAB7 · #669CB1 · #678AB0

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 Library

Color Details Color Details

#D0EBB7

Emerald · LightGray · Mint Green

HEX
#D0EBB7
RGB
rgb(208, 235, 183)
HSL
hsl(91, 57%, 82%)
HSB
hsb(91, 22%, 92%)
CMYK
cmyk(11%, 0%, 22%, 8%)
Oklch
oklch(90.7% 0.075 130.1)

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

#8CC3A7

Celadon · DarkSeaGreen · Apple Green

HEX
#8CC3A7
RGB
rgb(140, 195, 167)
HSL
hsl(149, 31%, 66%)
HSB
hsb(149, 28%, 76%)
CMYK
cmyk(28%, 0%, 14%, 24%)
Oklch
oklch(77.1% 0.070 162.0)

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

#7BBAB7

Jade · MediumAquaMarine · Lake Green

HEX
#7BBAB7
RGB
rgb(123, 186, 183)
HSL
hsl(177, 31%, 61%)
HSB
hsb(177, 34%, 73%)
CMYK
cmyk(34%, 0%, 2%, 27%)
Oklch
oklch(74.6% 0.065 192.1)

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

#669CB1

Slate Blue · CadetBlue · Lake Green

HEX
#669CB1
RGB
rgb(102, 156, 177)
HSL
hsl(197, 32%, 55%)
HSB
hsb(197, 42%, 69%)
CMYK
cmyk(42%, 12%, 0%, 31%)
Oklch
oklch(66.3% 0.065 224.5)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#678AB0

Azure · CadetBlue · Navy Blue

HEX
#678AB0
RGB
rgb(103, 138, 176)
HSL
hsl(211, 32%, 55%)
HSB
hsb(211, 41%, 69%)
CMYK
cmyk(41%, 22%, 0%, 31%)
Oklch
oklch(62.2% 0.070 251.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D0EBB7
D2B7EB

Analogous

EAEBB7
D0EBB7
B7EBB8

Triadic

D0EBB7
B7D0EB
EBB7D0

Split-Comp.

D0EBB7
B8B7EB
EBB7EA

Tetradic

D0EBB7
B7EAEB
D2B7EB
EBB8B7

Contrast Matrix WCAG 2.1 Contrast

D0EBB7
8CC3A7
7BBAB7
669CB1
678AB0
—
1.6
Fail
1.7
Fail
2.3
Fail
2.8
Fail
1.6
Fail
—
1.1
Fail
1.5
Fail
1.8
Fail
1.7
Fail
1.1
Fail
—
1.4
Fail
1.6
Fail
2.3
Fail
1.5
Fail
1.4
Fail
—
1.2
Fail
2.8
Fail
1.8
Fail
1.6
Fail
1.2
Fail
—
White BG
1.3Fail
2.0Fail
2.2Fail
3.0AA Large
3.6AA Large
Black BG
16.2AAA
10.5AAA
9.5AAA
7.0AA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCC4
A4A4AE
9697B8
7D7EAC
7676A7

Deuteranopia

DAD8C7
A19DAF
938EB8
7A76AB
7472A5

Tritanopia

D1CED0
8FB3B4
7EB8B8
69A8A7
69A09E

Achromatopsia

DDDDDD
AFAFAF
A7A7A7
8E8E8E
848484

Shades & Tints Shades & Tints

#D0EBB7

Dark
Light

#8CC3A7

Dark
Light

#7BBAB7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d0ebb7;
  --color-2: #8cc3a7;
  --color-3: #7bbab7;
  --color-4: #669cb1;
  --color-5: #678ab0;
}

SCSS

$color-1: #d0ebb7;
$color-2: #8cc3a7;
$color-3: #7bbab7;
$color-4: #669cb1;
$color-5: #678ab0;

TAILWIND

colors: {
  'brand-1': '#d0ebb7',
  'brand-2': '#8cc3a7',
  'brand-3': '#7bbab7',
  'brand-4': '#669cb1',
  'brand-5': '#678ab0',
}

RGB Array

[208, 235, 183], [140, 195, 167], [123, 186, 183], [102, 156, 177], [103, 138, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D0EBB7, #8CC3A7, #7BBAB7, #669CB1, #678AB0 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: #d0ebb7; --color-2: #8cc3a7; --color-3: #7bbab7; --color-4: #669cb1; --color-5: #678ab0. 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