← Back to Editor

#E3E3E3 · #F2F7D2 · #D0F5D2 · #87F5D4 · #313238

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#E3E3E3

Plain White · Lavender · Cloud White

HEX
#E3E3E3
RGB
rgb(227, 227, 227)
HSL
hsl(0, 0%, 89%)
HSB
hsb(0, 0%, 89%)
CMYK
cmyk(0%, 0%, 0%, 11%)
Oklch
oklch(91.6% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#F2F7D2

Fresh Green · Beige · Lemon Cream

HEX
#F2F7D2
RGB
rgb(242, 247, 210)
HSL
hsl(68, 70%, 90%)
HSB
hsb(68, 15%, 97%)
CMYK
cmyk(2%, 0%, 15%, 3%)
Oklch
oklch(96.3% 0.049 113.6)

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

#D0F5D2

Emerald · LightGray · Mint Green

HEX
#D0F5D2
RGB
rgb(208, 245, 210)
HSL
hsl(123, 65%, 89%)
HSB
hsb(123, 15%, 96%)
CMYK
cmyk(15%, 0%, 14%, 4%)
Oklch
oklch(93.4% 0.061 146.5)

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

#87F5D4

Jade · SkyBlue · Lake Green

HEX
#87F5D4
RGB
rgb(135, 245, 212)
HSL
hsl(162, 85%, 75%)
HSB
hsb(162, 45%, 96%)
CMYK
cmyk(45%, 0%, 13%, 4%)
Oklch
oklch(89.5% 0.113 172.1)

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

#313238

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#313238
RGB
rgb(49, 50, 56)
HSL
hsl(231, 7%, 21%)
HSB
hsb(231, 12%, 22%)
CMYK
cmyk(13%, 11%, 0%, 78%)
Oklch
oklch(31.9% 0.011 278.2)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3E3E3
E3E3E3

Analogous

E3E3E3
E3E3E3
E3E3E3

Triadic

E3E3E3
E3E3E3
E3E3E3

Split-Comp.

E3E3E3
E3E3E3
E3E3E3

Tetradic

E3E3E3
E3E3E3
E3E3E3
E3E3E3

Contrast Matrix WCAG 2.1 Contrast

E3E3E3
F2F7D2
D0F5D2
87F5D4
313238
—
1.2
Fail
1.1
Fail
1.0
Fail
10.0
AAA
1.2
Fail
—
1.1
Fail
1.2
Fail
11.6
AAA
1.1
Fail
1.1
Fail
—
1.1
Fail
10.8
AAA
1.0
Fail
1.2
Fail
1.1
Fail
—
9.8
AAA
10.0
AAA
11.6
AAA
10.8
AAA
9.8
AAA
—
White BG
1.3Fail
1.1Fail
1.2Fail
1.3Fail
12.8AAA
Black BG
16.4AAA
19.0AAA
17.7AAA
16.0AAA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3E3
F4F4DB
E0E0DA
B7B8DC
313137

Deuteranopia

E3E3E3
F4F3DD
DEDBDD
B0A8DE
313136

Tritanopia

E3E3E3
F2E2E4
D2E1E3
8DE2E4
313535

Achromatopsia

E3E3E3
F1F1F1
E6E6E6
D0D0D0
323232

Shades & Tints Shades & Tints

#E3E3E3

Dark
Light

#F2F7D2

Dark
Light

#D0F5D2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3e3e3;
  --color-2: #f2f7d2;
  --color-3: #d0f5d2;
  --color-4: #87f5d4;
  --color-5: #313238;
}

SCSS

$color-1: #e3e3e3;
$color-2: #f2f7d2;
$color-3: #d0f5d2;
$color-4: #87f5d4;
$color-5: #313238;

TAILWIND

colors: {
  'brand-1': '#e3e3e3',
  'brand-2': '#f2f7d2',
  'brand-3': '#d0f5d2',
  'brand-4': '#87f5d4',
  'brand-5': '#313238',
}

RGB Array

[227, 227, 227], [242, 247, 210], [208, 245, 210], [135, 245, 212], [49, 50, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3E3E3, #F2F7D2, #D0F5D2, #87F5D4, #313238 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #e3e3e3; --color-2: #f2f7d2; --color-3: #d0f5d2; --color-4: #87f5d4; --color-5: #313238. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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. 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