← Back to Editor

#C3B8A4 · #ECEDDD · #DDD6C4 · #4E4B42 · #000000

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

#C3B8A4

Ginger · Tan · Warm Sun

HEX
#C3B8A4
RGB
rgb(195, 184, 164)
HSL
hsl(39, 21%, 70%)
HSB
hsb(39, 16%, 76%)
CMYK
cmyk(0%, 6%, 16%, 24%)
Oklch
oklch(78.6% 0.030 82.6)

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

#ECEDDD

Fresh Green · Beige · Lemon Cream

HEX
#ECEDDD
RGB
rgb(236, 237, 221)
HSL
hsl(64, 31%, 90%)
HSB
hsb(64, 7%, 93%)
CMYK
cmyk(0%, 0%, 7%, 7%)
Oklch
oklch(94.1% 0.021 109.7)

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

#DDD6C4

Goose Yellow · LightGray · Lemon Cream

HEX
#DDD6C4
RGB
rgb(221, 214, 196)
HSL
hsl(43, 27%, 82%)
HSB
hsb(43, 11%, 87%)
CMYK
cmyk(0%, 3%, 11%, 13%)
Oklch
oklch(87.7% 0.025 89.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#4E4B42

Ochre · DarkSlateGray · Charcoal

HEX
#4E4B42
RGB
rgb(78, 75, 66)
HSL
hsl(45, 8%, 28%)
HSB
hsb(45, 15%, 31%)
CMYK
cmyk(0%, 4%, 15%, 69%)
Oklch
oklch(41.3% 0.015 91.7)

Traditional「Ochre」· Paint「Charcoal」· Creative Midnight Shadow

#000000

Ink Black · Black · Jet Black

HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
HSB
hsb(0, 0%, 0%)
CMYK
cmyk(0%, 0%, 0%, 100%)
Oklch
oklch(0.0% 0.000 0.0)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3B8A4
A2AEC3

Analogous

C3A7A2
C3B8A4
BEC3A2

Triadic

C3B8A4
A2C3B7
B7A2C3

Split-Comp.

C3B8A4
A2BEC3
A7A2C3

Tetradic

C3B8A4
A2C3A7
A2AEC3
C3A2BE

Contrast Matrix WCAG 2.1 Contrast

C3B8A4
ECEDDD
DDD6C4
4E4B42
000000
—
1.7
Fail
1.4
Fail
4.4
AA Large
10.7
AAA
1.7
Fail
—
1.2
Fail
7.4
AAA
17.7
AAA
1.4
Fail
1.2
Fail
—
6.0
AA
14.5
AAA
4.4
AA Large
7.4
AAA
6.0
AA
—
2.4
Fail
10.7
AAA
17.7
AAA
14.5
AAA
2.4
Fail
—
White BG
2.0Fail
1.2Fail
1.4Fail
8.7AAA
21.0AAA
Black BG
10.7AAA
17.7AAA
14.5AAA
2.4Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBEA9
ECECE1
DADAC8
4D4D44
000000

Deuteranopia

BFC0AA
ECECE2
DADBC9
4D4D45
000000

Tritanopia

C2ADAE
ECE4E5
DDCCCD
4E4646
000000

Achromatopsia

B9B9B9
EBEBEB
D6D6D6
4B4B4B
000000

Shades & Tints Shades & Tints

#C3B8A4

Dark
Light

#ECEDDD

Dark
Light

#DDD6C4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3b8a4;
  --color-2: #eceddd;
  --color-3: #ddd6c4;
  --color-4: #4e4b42;
  --color-5: #000000;
}

SCSS

$color-1: #c3b8a4;
$color-2: #eceddd;
$color-3: #ddd6c4;
$color-4: #4e4b42;
$color-5: #000000;

TAILWIND

colors: {
  'brand-1': '#c3b8a4',
  'brand-2': '#eceddd',
  'brand-3': '#ddd6c4',
  'brand-4': '#4e4b42',
  'brand-5': '#000000',
}

RGB Array

[195, 184, 164], [236, 237, 221], [221, 214, 196], [78, 75, 66], [0, 0, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C3B8A4, #ECEDDD, #DDD6C4, #4E4B42, #000000 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: #c3b8a4; --color-2: #eceddd; --color-3: #ddd6c4; --color-4: #4e4b42; --color-5: #000000. 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