← Back to Editor

#E7E8E2 · #99A8A1 · #545D7A · #262948 · #A0A4AD

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

#E7E8E2

Willow Green · Beige · Mint Green

HEX
#E7E8E2
RGB
rgb(231, 232, 226)
HSL
hsl(70, 12%, 90%)
HSB
hsb(70, 3%, 91%)
CMYK
cmyk(0%, 0%, 3%, 9%)
Oklch
oklch(92.9% 0.008 114.2)

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

#99A8A1

Jade · DarkGray · Silver Sand

HEX
#99A8A1
RGB
rgb(153, 168, 161)
HSL
hsl(152, 8%, 63%)
HSB
hsb(152, 9%, 66%)
CMYK
cmyk(9%, 0%, 4%, 34%)
Oklch
oklch(71.8% 0.020 166.1)

Traditional「Jade」· Paint「Silver Sand」· Creative Urban Concrete

#545D7A

Indigo · DimGray · Prussian Blue

HEX
#545D7A
RGB
rgb(84, 93, 122)
HSL
hsl(226, 18%, 40%)
HSB
hsb(226, 31%, 48%)
CMYK
cmyk(31%, 24%, 0%, 52%)
Oklch
oklch(48.2% 0.048 271.1)

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

#262948

Indigo · DarkSlateGray · Prussian Blue

HEX
#262948
RGB
rgb(38, 41, 72)
HSL
hsl(235, 31%, 22%)
HSB
hsb(235, 47%, 28%)
CMYK
cmyk(47%, 43%, 0%, 72%)
Oklch
oklch(29.4% 0.056 278.1)

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

#A0A4AD

Ash · DarkGray · Silver Sand

HEX
#A0A4AD
RGB
rgb(160, 164, 173)
HSL
hsl(222, 7%, 65%)
HSB
hsb(222, 8%, 68%)
CMYK
cmyk(8%, 5%, 0%, 32%)
Oklch
oklch(71.8% 0.014 266.7)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E7E8E2
E3E2E9

Analogous

E9E7E2
E7E8E2
E4E9E2

Triadic

E7E8E2
E2E8E9
E9E2E8

Split-Comp.

E7E8E2
E2E4E9
E7E2E9

Tetradic

E7E8E2
E2E9E7
E3E2E9
E9E2E4

Contrast Matrix WCAG 2.1 Contrast

E7E8E2
99A8A1
545D7A
262948
A0A4AD
—
2.0
Fail
5.3
AA
11.4
AAA
2.0
Fail
2.0
Fail
—
2.6
Fail
5.7
AA
1.0
Fail
5.3
AA
2.6
Fail
—
2.2
Fail
2.6
Fail
11.4
AAA
5.7
AA
2.2
Fail
—
5.6
AA
2.0
Fail
1.0
Fail
2.6
Fail
5.6
AA
—
White BG
1.2Fail
2.5Fail
6.5AA
14.1AAA
2.5Fail
Black BG
17.0AAA
8.5AAA
3.2AA Large
1.5Fail
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7E3
9FA0A3
585873
272740
A2A2AB

Deuteranopia

E7E7E4
9F9EA3
575771
27273F
A2A1AA

Tritanopia

E7E5E5
9AA4A4
546D6C
263B39
A0A9A9

Achromatopsia

E7E7E7
A3A3A3
5E5E5E
2C2C2C
A4A4A4

Shades & Tints Shades & Tints

#E7E8E2

Dark
Light

#99A8A1

Dark
Light

#545D7A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e7e8e2;
  --color-2: #99a8a1;
  --color-3: #545d7a;
  --color-4: #262948;
  --color-5: #a0a4ad;
}

SCSS

$color-1: #e7e8e2;
$color-2: #99a8a1;
$color-3: #545d7a;
$color-4: #262948;
$color-5: #a0a4ad;

TAILWIND

colors: {
  'brand-1': '#e7e8e2',
  'brand-2': '#99a8a1',
  'brand-3': '#545d7a',
  'brand-4': '#262948',
  'brand-5': '#a0a4ad',
}

RGB Array

[231, 232, 226], [153, 168, 161], [84, 93, 122], [38, 41, 72], [160, 164, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E7E8E2, #99A8A1, #545D7A, #262948, #A0A4AD 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: #e7e8e2; --color-2: #99a8a1; --color-3: #545d7a; --color-4: #262948; --color-5: #a0a4ad. 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