← Back to Editor

#DED4CC · #BF4413 · #3E3B18 · #4C3748 · #21161D

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

#DED4CC

Apricot · LightGray · Peach Orange

HEX
#DED4CC
RGB
rgb(222, 212, 204)
HSL
hsl(27, 21%, 84%)
HSB
hsb(27, 8%, 87%)
CMYK
cmyk(0%, 5%, 8%, 13%)
Oklch
oklch(87.6% 0.016 61.3)

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

#BF4413

Tangerine · FireBrick · Amber Brown

HEX
#BF4413
RGB
rgb(191, 68, 19)
HSL
hsl(17, 82%, 41%)
HSB
hsb(17, 90%, 75%)
CMYK
cmyk(0%, 64%, 90%, 25%)
Oklch
oklch(55.2% 0.167 38.9)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#3E3B18

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#3E3B18
RGB
rgb(62, 59, 24)
HSL
hsl(55, 44%, 17%)
HSB
hsb(55, 61%, 24%)
CMYK
cmyk(0%, 5%, 61%, 76%)
Oklch
oklch(34.7% 0.053 104.4)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#4C3748

Rose Purple · DarkSlateGray · Eggplant

HEX
#4C3748
RGB
rgb(76, 55, 72)
HSL
hsl(311, 16%, 26%)
HSB
hsb(311, 28%, 30%)
CMYK
cmyk(0%, 28%, 5%, 70%)
Oklch
oklch(36.7% 0.040 333.2)

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

#21161D

Rose Purple · Black · Raspberry

HEX
#21161D
RGB
rgb(33, 22, 29)
HSL
hsl(322, 20%, 11%)
HSB
hsb(322, 33%, 13%)
CMYK
cmyk(0%, 33%, 12%, 87%)
Oklch
oklch(21.7% 0.022 340.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DED4CC
CED7DF

Analogous

DFCECE
DED4CC
DFDECE

Triadic

DED4CC
CEDFD5
D5CEDF

Split-Comp.

DED4CC
CEDFDE
CECEDF

Tetradic

DED4CC
CEDFCE
CED7DF
DECEDF

Contrast Matrix WCAG 2.1 Contrast

DED4CC
BF4413
3E3B18
4C3748
21161D
—
3.6
AA Large
7.8
AAA
7.4
AAA
12.0
AAA
3.6
AA Large
—
2.2
Fail
2.1
Fail
3.4
AA Large
7.8
AAA
2.2
Fail
—
1.1
Fail
1.5
Fail
7.4
AAA
2.1
Fail
1.1
Fail
—
1.6
Fail
12.0
AAA
3.4
AA Large
1.5
Fail
1.6
Fail
—
White BG
1.5Fail
5.2AA
11.4AAA
10.8AAA
17.5AAA
Black BG
14.4AAA
4.1AA Large
1.8Fail
1.9Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DADACE
8A891F
3D3D20
434344
1C1C1B

Deuteranopia

DADBCE
919A22
3D3D23
444643
1D1E1B

Tritanopia

DDCFD0
B9282A
3E2729
4B4140
201A1A

Achromatopsia

D6D6D6
636363
383838
3F3F3F
1A1A1A

Shades & Tints Shades & Tints

#DED4CC

Dark
Light

#BF4413

Dark
Light

#3E3B18

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ded4cc;
  --color-2: #bf4413;
  --color-3: #3e3b18;
  --color-4: #4c3748;
  --color-5: #21161d;
}

SCSS

$color-1: #ded4cc;
$color-2: #bf4413;
$color-3: #3e3b18;
$color-4: #4c3748;
$color-5: #21161d;

TAILWIND

colors: {
  'brand-1': '#ded4cc',
  'brand-2': '#bf4413',
  'brand-3': '#3e3b18',
  'brand-4': '#4c3748',
  'brand-5': '#21161d',
}

RGB Array

[222, 212, 204], [191, 68, 19], [62, 59, 24], [76, 55, 72], [33, 22, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DED4CC, #BF4413, #3E3B18, #4C3748, #21161D is ideal for: tech websites, dark mode UIs, game UIs, 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: #ded4cc; --color-2: #bf4413; --color-3: #3e3b18; --color-4: #4c3748; --color-5: #21161d. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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