← Back to Editor

#EFDCC2 · #B6AB9B · #717871 · #535556 · #33272D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#EFDCC2

Goose Yellow · Wheat · Peach Orange

HEX
#EFDCC2
RGB
rgb(239, 220, 194)
HSL
hsl(35, 58%, 85%)
HSB
hsb(35, 19%, 94%)
CMYK
cmyk(0%, 8%, 19%, 6%)
Oklch
oklch(90.3% 0.040 75.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#B6AB9B

Ginger · DarkGray · Warm Sun

HEX
#B6AB9B
RGB
rgb(182, 171, 155)
HSL
hsl(36, 16%, 66%)
HSB
hsb(36, 15%, 71%)
CMYK
cmyk(0%, 6%, 15%, 29%)
Oklch
oklch(74.6% 0.026 77.4)

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

#717871

Ink Gray · DimGray · Warm Gray

HEX
#717871
RGB
rgb(113, 120, 113)
HSL
hsl(120, 3%, 46%)
HSB
hsb(120, 6%, 47%)
CMYK
cmyk(6%, 0%, 6%, 53%)
Oklch
oklch(56.5% 0.014 145.4)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#535556

Ink Gray · DimGray · Charcoal

HEX
#535556
RGB
rgb(83, 85, 86)
HSL
hsl(200, 2%, 33%)
HSB
hsb(200, 3%, 34%)
CMYK
cmyk(3%, 1%, 0%, 66%)
Oklch
oklch(44.8% 0.003 228.8)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#33272D

Dark Violet · DarkSlateGray · Raspberry

HEX
#33272D
RGB
rgb(51, 39, 45)
HSL
hsl(330, 13%, 18%)
HSB
hsb(330, 24%, 20%)
CMYK
cmyk(0%, 24%, 12%, 80%)
Oklch
oklch(28.9% 0.021 346.9)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EFDCC2
C3D5EF

Analogous

EFC6C3
EFDCC2
EBEFC3

Triadic

EFDCC2
C3EFDC
DCC3EF

Split-Comp.

EFDCC2
C3EBEF
C6C3EF

Tetradic

EFDCC2
C3EFC6
C3D5EF
EFC3EB

Contrast Matrix WCAG 2.1 Contrast

EFDCC2
B6AB9B
717871
535556
33272D
—
1.7
Fail
3.4
AA Large
5.6
AA
10.7
AAA
1.7
Fail
—
2.0
Fail
3.3
AA Large
6.3
AA
3.4
AA Large
2.0
Fail
—
1.7
Fail
3.2
AA Large
5.6
AA
3.3
AA Large
1.7
Fail
—
1.9
Fail
10.7
AAA
6.3
AA
3.2
AA Large
1.9
Fail
—
White BG
1.3Fail
2.3Fail
4.5AA
7.5AAA
14.3AAA
Black BG
15.7AAA
9.3AAA
4.6AA
2.8Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7C8
B1B19F
747473
545456
2E2E2C

Deuteranopia

E8E9CA
B2B3A0
747373
545456
2F2F2B

Tritanopia

EECDCE
B5A2A3
717474
535656
322A2A

Achromatopsia

DFDFDF
ACACAC
757575
555555
2B2B2B

Shades & Tints Shades & Tints

#EFDCC2

Dark
Light

#B6AB9B

Dark
Light

#717871

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #efdcc2;
  --color-2: #b6ab9b;
  --color-3: #717871;
  --color-4: #535556;
  --color-5: #33272d;
}

SCSS

$color-1: #efdcc2;
$color-2: #b6ab9b;
$color-3: #717871;
$color-4: #535556;
$color-5: #33272d;

TAILWIND

colors: {
  'brand-1': '#efdcc2',
  'brand-2': '#b6ab9b',
  'brand-3': '#717871',
  'brand-4': '#535556',
  'brand-5': '#33272d',
}

RGB Array

[239, 220, 194], [182, 171, 155], [113, 120, 113], [83, 85, 86], [51, 39, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EFDCC2, #B6AB9B, #717871, #535556, #33272D 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: #efdcc2; --color-2: #b6ab9b; --color-3: #717871; --color-4: #535556; --color-5: #33272d. 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