← Back to Editor

#E3E3D7 · #BAC1BC · #987598 · #554054 · #3A212E

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E3E3D7

Fresh Green · LightGray · Lemon Cream

HEX
#E3E3D7
RGB
rgb(227, 227, 215)
HSL
hsl(60, 18%, 87%)
HSB
hsb(60, 5%, 89%)
CMYK
cmyk(0%, 0%, 5%, 11%)
Oklch
oklch(91.3% 0.016 106.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#BAC1BC

Silver Gray · Silver · Pearl Gray

HEX
#BAC1BC
RGB
rgb(186, 193, 188)
HSL
hsl(137, 5%, 74%)
HSB
hsb(137, 4%, 76%)
CMYK
cmyk(4%, 0%, 3%, 24%)
Oklch
oklch(80.4% 0.010 155.0)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#987598

Rose Purple · Gray · Violet

HEX
#987598
RGB
rgb(152, 117, 152)
HSL
hsl(300, 15%, 53%)
HSB
hsb(300, 23%, 60%)
CMYK
cmyk(0%, 23%, 0%, 40%)
Oklch
oklch(60.8% 0.066 326.4)

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

#554054

Rose Purple · DarkSlateGray · Eggplant

HEX
#554054
RGB
rgb(85, 64, 84)
HSL
hsl(303, 14%, 29%)
HSB
hsb(303, 25%, 33%)
CMYK
cmyk(0%, 25%, 1%, 67%)
Oklch
oklch(40.2% 0.043 327.9)

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

#3A212E

Rose Purple · DarkSlateGray · Raspberry

HEX
#3A212E
RGB
rgb(58, 33, 46)
HSL
hsl(329, 27%, 18%)
HSB
hsb(329, 43%, 23%)
CMYK
cmyk(0%, 43%, 21%, 77%)
Oklch
oklch(28.5% 0.043 347.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3E3D7
D8D8E4

Analogous

E4DED8
E3E3D7
DEE4D8

Triadic

E3E3D7
D8E4E4
E4D8E4

Split-Comp.

E3E3D7
D8DEE4
DED8E4

Tetradic

E3E3D7
D8E4DE
D8D8E4
E4D8DE

Contrast Matrix WCAG 2.1 Contrast

E3E3D7
BAC1BC
987598
554054
3A212E
—
1.4
Fail
3.0
AA Large
7.2
AAA
11.3
AAA
1.4
Fail
—
2.1
Fail
5.1
AA
8.0
AAA
3.0
AA Large
2.1
Fail
—
2.4
Fail
3.7
AA Large
7.2
AAA
5.1
AA
2.4
Fail
—
1.6
Fail
11.3
AAA
8.0
AAA
3.7
AA Large
1.6
Fail
—
White BG
1.3Fail
1.8Fail
3.9AA Large
9.3AAA
14.6AAA
Black BG
16.2AAA
11.4AAA
5.3AA
2.2Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3DA
BDBDBD
898990
4C4C4F
2F2F2B

Deuteranopia

E3E3DB
BDBCBE
8B8E8E
4D4F4E
31322A

Tritanopia

E3DCDD
BABEBE
968987
544B4B
392828

Achromatopsia

E2E2E2
BEBEBE
838383
494949
2A2A2A

Shades & Tints Shades & Tints

#E3E3D7

Dark
Light

#BAC1BC

Dark
Light

#987598

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3e3d7;
  --color-2: #bac1bc;
  --color-3: #987598;
  --color-4: #554054;
  --color-5: #3a212e;
}

SCSS

$color-1: #e3e3d7;
$color-2: #bac1bc;
$color-3: #987598;
$color-4: #554054;
$color-5: #3a212e;

TAILWIND

colors: {
  'brand-1': '#e3e3d7',
  'brand-2': '#bac1bc',
  'brand-3': '#987598',
  'brand-4': '#554054',
  'brand-5': '#3a212e',
}

RGB Array

[227, 227, 215], [186, 193, 188], [152, 117, 152], [85, 64, 84], [58, 33, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3E3D7, #BAC1BC, #987598, #554054, #3A212E 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: #e3e3d7; --color-2: #bac1bc; --color-3: #987598; --color-4: #554054; --color-5: #3a212e. 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