#D4E6C0 + #7FD1BA + #6A93A9 + #77799F + #766091 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D4E6C0

Willow Green · LightGray · Mint Green

HEX

#D4E6C0

RGB

rgb(212, 230, 192)

HSL

hsl(88, 43%, 83%)

HSB

hsb(88, 17%, 90%)

CMYK

cmyk(8%, 0%, 17%, 10%)

Oklch

oklch(90.2% 0.054 128.1)

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

#7FD1BA

Jade · MediumAquaMarine · Lake Green

HEX

#7FD1BA

RGB

rgb(127, 209, 186)

HSL

hsl(163, 47%, 66%)

HSB

hsb(163, 39%, 82%)

CMYK

cmyk(39%, 0%, 11%, 18%)

Oklch

oklch(80.2% 0.087 174.1)

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

#6A93A9

Slate Blue · CadetBlue · Navy Blue

HEX

#6A93A9

RGB

rgb(106, 147, 169)

HSL

hsl(201, 27%, 54%)

HSB

hsb(201, 37%, 66%)

CMYK

cmyk(37%, 13%, 0%, 34%)

Oklch

oklch(64.1% 0.056 232.2)

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

#77799F

Azure · LightSlateGray · Navy Blue

HEX

#77799F

RGB

rgb(119, 121, 159)

HSL

hsl(237, 17%, 55%)

HSB

hsb(237, 25%, 62%)

CMYK

cmyk(25%, 24%, 0%, 38%)

Oklch

oklch(58.9% 0.058 282.1)

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

#766091

Deep Indigo · SlateGray · Violet

HEX

#766091

RGB

rgb(118, 96, 145)

HSL

hsl(267, 20%, 47%)

HSB

hsb(267, 34%, 57%)

CMYK

cmyk(19%, 34%, 0%, 43%)

Oklch

oklch(53.0% 0.079 304.4)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4E6C0

D2C1E6

Analogous

E6E5C1

D4E6C0

C2E6C1

Triadic

D4E6C0

C1D5E6

E6C1D5

Split-Comp.

D4E6C0

C1C2E6

E5C1E6

Tetradic

D4E6C0

C1E6E5

D2C1E6

E6C1C2

Contrast Matrix WCAG 2.1 Contrast

D4E6C0	7FD1BA	6A93A9	77799F	766091
—	1.4 Fail	2.5 Fail	3.2 AA Large	4.1 AA Large
1.4 Fail	—	1.8 Fail	2.3 Fail	3.0 AA Large
2.5 Fail	1.8 Fail	—	1.3 Fail	1.7 Fail
3.2 AA Large	2.3 Fail	1.3 Fail	—	1.3 Fail
4.1 AA Large	3.0 AA Large	1.7 Fail	1.3 Fail	—

White BG

1.3Fail

1.8Fail

3.3AA Large

4.2AA Large

5.5AA

Black BG

15.9AAA

11.7AAA

6.4AA

5.0AA

3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCC9

A3A3C0

7C7CA4

787896

6C6C85

Deuteranopia

DBD9CB

9E98C1

7976A2

787894

6E6F82

Tritanopia

D5D0D2

83C4C5

6C9F9F

778F8D

757C7A

Achromatopsia

DCDCDC

B6B6B6

898989

7D7D7D

6C6C6C

Shades & Tints Shades & Tints

#D4E6C0

Dark

Light

#7FD1BA

Dark

Light

#6A93A9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4e6c0;
  --color-2: #7fd1ba;
  --color-3: #6a93a9;
  --color-4: #77799f;
  --color-5: #766091;
}

SCSS

$color-1: #d4e6c0;
$color-2: #7fd1ba;
$color-3: #6a93a9;
$color-4: #77799f;
$color-5: #766091;

TAILWIND

colors: {
  'brand-1': '#d4e6c0',
  'brand-2': '#7fd1ba',
  'brand-3': '#6a93a9',
  'brand-4': '#77799f',
  'brand-5': '#766091',
}

RGB Array

[212, 230, 192], [127, 209, 186], [106, 147, 169], [119, 121, 159], [118, 96, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #D4E6C0, #7FD1BA, #6A93A9, #77799F, #766091 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: #d4e6c0; --color-2: #7fd1ba; --color-3: #6a93a9; --color-4: #77799f; --color-5: #766091. 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