← Back to Editor

#E5F4E1 · #A5C1BE · #848796 · #684972 · #532A56

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

#E5F4E1

Celadon · Beige · Mint Green

HEX
#E5F4E1
RGB
rgb(229, 244, 225)
HSL
hsl(107, 46%, 92%)
HSB
hsb(107, 8%, 96%)
CMYK
cmyk(6%, 0%, 8%, 4%)
Oklch
oklch(95.1% 0.030 139.1)

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

#A5C1BE

Jade · Silver · Lake Green

HEX
#A5C1BE
RGB
rgb(165, 193, 190)
HSL
hsl(174, 18%, 70%)
HSB
hsb(174, 15%, 76%)
CMYK
cmyk(15%, 0%, 2%, 24%)
Oklch
oklch(78.9% 0.031 188.7)

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

#848796

Azure · LightSlateGray · Warm Gray

HEX
#848796
RGB
rgb(132, 135, 150)
HSL
hsl(230, 8%, 55%)
HSB
hsb(230, 12%, 59%)
CMYK
cmyk(12%, 10%, 0%, 41%)
Oklch
oklch(62.6% 0.023 276.7)

Traditional「Azure」· Paint「Warm Gray」· Creative Urban Concrete

#684972

Dark Plum · DimGray · Eggplant

HEX
#684972
RGB
rgb(104, 73, 114)
HSL
hsl(285, 22%, 37%)
HSB
hsb(285, 36%, 45%)
CMYK
cmyk(9%, 36%, 0%, 55%)
Oklch
oklch(45.5% 0.075 317.7)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#532A56

Dark Plum · DarkSlateGray · Eggplant

HEX
#532A56
RGB
rgb(83, 42, 86)
HSL
hsl(296, 34%, 25%)
HSB
hsb(296, 51%, 34%)
CMYK
cmyk(3%, 51%, 0%, 66%)
Oklch
oklch(35.8% 0.089 324.7)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E5F4E1
F0E1F4

Analogous

EFF4E1
E5F4E1
E1F4E7

Triadic

E5F4E1
E1E5F4
F4E1E5

Split-Comp.

E5F4E1
E7E1F4
F4E1EF

Tetradic

E5F4E1
E1EFF4
F0E1F4
F4E7E1

Contrast Matrix WCAG 2.1 Contrast

E5F4E1
A5C1BE
848796
684972
532A56
—
1.7
Fail
3.1
AA Large
6.6
AA
10.0
AAA
1.7
Fail
—
1.9
Fail
3.9
AA Large
6.0
AA
3.1
AA Large
1.9
Fail
—
2.1
Fail
3.2
AA Large
6.6
AA
3.9
AA Large
2.1
Fail
—
1.5
Fail
10.0
AAA
6.0
AA
3.2
AA Large
1.5
Fail
—
White BG
1.1Fail
1.9Fail
3.6AA Large
7.5AAA
11.5AAA
Black BG
18.4AAA
11.0AAA
5.9AA
2.8Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBECE6
B1B1BF
858592
5B5A68
41414B

Deuteranopia

EBEAE7
B0ADBF
858592
5C5F66
444749

Tritanopia

E6E9EA
A6BFBF
84908F
66605F
514341

Achromatopsia

EDEDED
B8B8B8
888888
575757
3B3B3B

Shades & Tints Shades & Tints

#E5F4E1

Dark
Light

#A5C1BE

Dark
Light

#848796

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e5f4e1;
  --color-2: #a5c1be;
  --color-3: #848796;
  --color-4: #684972;
  --color-5: #532a56;
}

SCSS

$color-1: #e5f4e1;
$color-2: #a5c1be;
$color-3: #848796;
$color-4: #684972;
$color-5: #532a56;

TAILWIND

colors: {
  'brand-1': '#e5f4e1',
  'brand-2': '#a5c1be',
  'brand-3': '#848796',
  'brand-4': '#684972',
  'brand-5': '#532a56',
}

RGB Array

[229, 244, 225], [165, 193, 190], [132, 135, 150], [104, 73, 114], [83, 42, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E5F4E1, #A5C1BE, #848796, #684972, #532A56 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: #e5f4e1; --color-2: #a5c1be; --color-3: #848796; --color-4: #684972; --color-5: #532a56. 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