← Back to Editor

#E3D4C7 · #E3C3B4 · #E3B39B · #3F3A39 · #202020

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

#E3D4C7

Apricot · LightGray · Peach Orange

HEX
#E3D4C7
RGB
rgb(227, 212, 199)
HSL
hsl(28, 33%, 84%)
HSB
hsb(28, 12%, 89%)
CMYK
cmyk(0%, 7%, 12%, 11%)
Oklch
oklch(87.9% 0.024 63.5)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#E3C3B4

Apricot · Wheat · Peach Orange

HEX
#E3C3B4
RGB
rgb(227, 195, 180)
HSL
hsl(19, 46%, 80%)
HSB
hsb(19, 21%, 89%)
CMYK
cmyk(0%, 14%, 21%, 11%)
Oklch
oklch(84.1% 0.042 46.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#E3B39B

Apricot · BurlyWood · Warm Sun

HEX
#E3B39B
RGB
rgb(227, 179, 155)
HSL
hsl(20, 56%, 75%)
HSB
hsb(20, 32%, 89%)
CMYK
cmyk(0%, 21%, 32%, 11%)
Oklch
oklch(80.4% 0.065 47.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#3F3A39

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3F3A39
RGB
rgb(63, 58, 57)
HSL
hsl(10, 5%, 24%)
HSB
hsb(10, 10%, 25%)
CMYK
cmyk(0%, 8%, 10%, 75%)
Oklch
oklch(35.3% 0.007 31.1)

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

#202020

Ink Black · Black · Dark Stone

HEX
#202020
RGB
rgb(32, 32, 32)
HSL
hsl(0, 0%, 13%)
HSB
hsb(0, 0%, 13%)
CMYK
cmyk(0%, 0%, 0%, 87%)
Oklch
oklch(24.4% 0.000 89.9)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3D4C7
C9D7E4

Analogous

E4C9CA
E3D4C7
E4E3C9

Triadic

E3D4C7
C9E4D5
D5C9E4

Split-Comp.

E3D4C7
C9E4E3
C9CAE4

Tetradic

E3D4C7
CAE4C9
C9D7E4
E3C9E4

Contrast Matrix WCAG 2.1 Contrast

E3D4C7
E3C3B4
E3B39B
3F3A39
202020
—
1.1
Fail
1.3
Fail
7.7
AAA
11.3
AAA
1.1
Fail
—
1.1
Fail
6.8
AA
9.9
AAA
1.3
Fail
1.1
Fail
—
6.0
AA
8.7
AAA
7.7
AAA
6.8
AA
6.0
AA
—
1.5
Fail
11.3
AAA
9.9
AAA
8.7
AAA
1.5
Fail
—
White BG
1.4Fail
1.6Fail
1.9Fail
11.2AAA
16.3AAA
Black BG
14.5AAA
12.7AAA
11.2AAA
1.9Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDCCA
D5D5B8
CECEA1
3D3D39
202020

Deuteranopia

DDDECB
D7D9B9
D1D5A2
3D3D39
202020

Tritanopia

E2CDCD
E1BABB
E1A5A6
3F3939
202020

Achromatopsia

D7D7D7
CBCBCB
BFBFBF
3B3B3B
202020

Shades & Tints Shades & Tints

#E3D4C7

Dark
Light

#E3C3B4

Dark
Light

#E3B39B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3d4c7;
  --color-2: #e3c3b4;
  --color-3: #e3b39b;
  --color-4: #3f3a39;
  --color-5: #202020;
}

SCSS

$color-1: #e3d4c7;
$color-2: #e3c3b4;
$color-3: #e3b39b;
$color-4: #3f3a39;
$color-5: #202020;

TAILWIND

colors: {
  'brand-1': '#e3d4c7',
  'brand-2': '#e3c3b4',
  'brand-3': '#e3b39b',
  'brand-4': '#3f3a39',
  'brand-5': '#202020',
}

RGB Array

[227, 212, 199], [227, 195, 180], [227, 179, 155], [63, 58, 57], [32, 32, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3D4C7, #E3C3B4, #E3B39B, #3F3A39, #202020 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: #e3d4c7; --color-2: #e3c3b4; --color-3: #e3b39b; --color-4: #3f3a39; --color-5: #202020. 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