← Back to Editor

#D9884E · #C44F4F · #823051 · #273133 · #211F18

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

#D9884E

Tangerine · Coral · Warm Sun

HEX
#D9884E
RGB
rgb(217, 136, 78)
HSL
hsl(25, 65%, 58%)
HSB
hsb(25, 64%, 85%)
CMYK
cmyk(0%, 37%, 64%, 15%)
Oklch
oklch(70.0% 0.124 54.7)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#C44F4F

Crimson · Sienna · Passion Red

HEX
#C44F4F
RGB
rgb(196, 79, 79)
HSL
hsl(0, 50%, 54%)
HSB
hsb(0, 60%, 77%)
CMYK
cmyk(0%, 60%, 60%, 23%)
Oklch
oklch(58.2% 0.151 23.0)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#823051

Dark Violet · Brown · Camellia

HEX
#823051
RGB
rgb(130, 48, 81)
HSL
hsl(336, 46%, 35%)
HSB
hsb(336, 63%, 51%)
CMYK
cmyk(0%, 63%, 38%, 49%)
Oklch
oklch(43.6% 0.118 358.1)

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

#273133

Slate Blue · DarkSlateGray · Peacock Green

HEX
#273133
RGB
rgb(39, 49, 51)
HSL
hsl(190, 13%, 18%)
HSB
hsb(190, 24%, 20%)
CMYK
cmyk(24%, 4%, 0%, 80%)
Oklch
oklch(30.5% 0.014 211.1)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#211F18

Ochre · Black · Amber Gold

HEX
#211F18
RGB
rgb(33, 31, 24)
HSL
hsl(47, 16%, 11%)
HSB
hsb(47, 27%, 13%)
CMYK
cmyk(0%, 6%, 27%, 87%)
Oklch
oklch(23.9% 0.013 93.9)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9884E
4EA0DA

Analogous

DA4E5A
D9884E
DACE4E

Triadic

D9884E
4EDA88
884EDA

Split-Comp.

D9884E
4EDACE
4E5ADA

Tetradic

D9884E
5ADA4E
4EA0DA
CE4EDA

Contrast Matrix WCAG 2.1 Contrast

D9884E
C44F4F
823051
273133
211F18
—
1.7
Fail
3.0
AA Large
4.8
AA
6.0
AA
1.7
Fail
—
1.8
Fail
2.9
Fail
3.6
AA Large
3.0
AA Large
1.8
Fail
—
1.6
Fail
2.0
Fail
4.8
AA
2.9
Fail
1.6
Fail
—
1.2
Fail
6.0
AA
3.6
AA Large
2.0
Fail
1.2
Fail
—
White BG
2.8Fail
4.6AA
8.4AAA
13.3AAA
16.5AAA
Black BG
7.6AAA
4.6AA
2.5Fail
1.6Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B55C
91904F
5E5E49
2B2B33
20201A

Deuteranopia

BBC15F
98A14F
636947
2B2A32
20201A

Tritanopia

D5676A
BE4F4F
7E4341
283232
211B1B

Achromatopsia

9A9A9A
727272
4C4C4C
2E2E2E
1F1F1F

Shades & Tints Shades & Tints

#D9884E

Dark
Light

#C44F4F

Dark
Light

#823051

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9884e;
  --color-2: #c44f4f;
  --color-3: #823051;
  --color-4: #273133;
  --color-5: #211f18;
}

SCSS

$color-1: #d9884e;
$color-2: #c44f4f;
$color-3: #823051;
$color-4: #273133;
$color-5: #211f18;

TAILWIND

colors: {
  'brand-1': '#d9884e',
  'brand-2': '#c44f4f',
  'brand-3': '#823051',
  'brand-4': '#273133',
  'brand-5': '#211f18',
}

RGB Array

[217, 136, 78], [196, 79, 79], [130, 48, 81], [39, 49, 51], [33, 31, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9884E, #C44F4F, #823051, #273133, #211F18 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: #d9884e; --color-2: #c44f4f; --color-3: #823051; --color-4: #273133; --color-5: #211f18. 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