← Back to Editor

#E2F9DF · #BDE4D1 · #91ADAF · #74677A · #674D5E

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

#E2F9DF

Emerald · Beige · Mint Green

HEX
#E2F9DF
RGB
rgb(226, 249, 223)
HSL
hsl(113, 68%, 93%)
HSB
hsb(113, 10%, 98%)
CMYK
cmyk(9%, 0%, 10%, 2%)
Oklch
oklch(95.8% 0.042 142.0)

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

#BDE4D1

Jade · LightGray · Mint Green

HEX
#BDE4D1
RGB
rgb(189, 228, 209)
HSL
hsl(151, 42%, 82%)
HSB
hsb(151, 17%, 89%)
CMYK
cmyk(17%, 0%, 8%, 11%)
Oklch
oklch(88.6% 0.048 164.3)

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

#91ADAF

Sky Blue · DarkGray · Lake Green

HEX
#91ADAF
RGB
rgb(145, 173, 175)
HSL
hsl(184, 16%, 63%)
HSB
hsb(184, 17%, 69%)
CMYK
cmyk(17%, 1%, 0%, 31%)
Oklch
oklch(72.7% 0.031 201.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#74677A

Dark Plum · DimGray · Warm Gray

HEX
#74677A
RGB
rgb(116, 103, 122)
HSL
hsl(281, 8%, 44%)
HSB
hsb(281, 16%, 48%)
CMYK
cmyk(5%, 16%, 0%, 52%)
Oklch
oklch(53.3% 0.033 315.2)

Traditional「Dark Plum」· Paint「Warm Gray」· Creative Urban Concrete

#674D5E

Rose Purple · DimGray · Camellia

HEX
#674D5E
RGB
rgb(103, 77, 94)
HSL
hsl(321, 14%, 35%)
HSB
hsb(321, 25%, 40%)
CMYK
cmyk(0%, 25%, 9%, 60%)
Oklch
oklch(45.4% 0.043 339.7)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2F9DF
F6E1F9

Analogous

F0F9E1
E2F9DF
E1F9EA

Triadic

E2F9DF
E1E4F9
F9E1E4

Split-Comp.

E2F9DF
EAE1F9
F9E1F0

Tetradic

E2F9DF
E1F0F9
F6E1F9
F9EAE1

Contrast Matrix WCAG 2.1 Contrast

E2F9DF
BDE4D1
91ADAF
74677A
674D5E
—
1.2
Fail
2.1
Fail
4.8
AA
6.7
AA
1.2
Fail
—
1.7
Fail
3.8
AA Large
5.4
AA
2.1
Fail
1.7
Fail
—
2.2
Fail
3.1
AA Large
4.8
AA
3.8
AA Large
2.2
Fail
—
1.4
Fail
6.7
AA
5.4
AA
3.1
AA Large
1.4
Fail
—
White BG
1.1Fail
1.4Fail
2.4Fail
5.3AA
7.5AAA
Black BG
18.8AAA
15.2AAA
8.8AAA
4.0AA Large
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECE5
CECED6
9D9DAF
6E6E75
5C5C5A

Deuteranopia

EBE9E7
CCC9D7
9C99AE
6F7074
5D5F59

Tritanopia

E3EAEB
BFD9DA
92AEAE
737271
665756

Achromatopsia

EFEFEF
D6D6D6
A5A5A5
6D6D6D
575757

Shades & Tints Shades & Tints

#E2F9DF

Dark
Light

#BDE4D1

Dark
Light

#91ADAF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2f9df;
  --color-2: #bde4d1;
  --color-3: #91adaf;
  --color-4: #74677a;
  --color-5: #674d5e;
}

SCSS

$color-1: #e2f9df;
$color-2: #bde4d1;
$color-3: #91adaf;
$color-4: #74677a;
$color-5: #674d5e;

TAILWIND

colors: {
  'brand-1': '#e2f9df',
  'brand-2': '#bde4d1',
  'brand-3': '#91adaf',
  'brand-4': '#74677a',
  'brand-5': '#674d5e',
}

RGB Array

[226, 249, 223], [189, 228, 209], [145, 173, 175], [116, 103, 122], [103, 77, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E2F9DF, #BDE4D1, #91ADAF, #74677A, #674D5E is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #e2f9df; --color-2: #bde4d1; --color-3: #91adaf; --color-4: #74677a; --color-5: #674d5e. 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. Restrained colors convey professionalism and trust. 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