← Back to Editor

#21082C · #48333E · #705D57 · #8F7B73 · #ECBD53

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

#21082C

Royal Purple · Black · Dark Purple

HEX
#21082C
RGB
rgb(33, 8, 44)
HSL
hsl(282, 69%, 10%)
HSB
hsb(282, 82%, 17%)
CMYK
cmyk(25%, 82%, 0%, 83%)
Oklch
oklch(19.8% 0.073 313.8)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#48333E

Rose Purple · DarkSlateGray · Raspberry

HEX
#48333E
RGB
rgb(72, 51, 62)
HSL
hsl(329, 17%, 24%)
HSB
hsb(329, 29%, 28%)
CMYK
cmyk(0%, 29%, 14%, 72%)
Oklch
oklch(34.9% 0.035 346.3)

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

#705D57

Crimson · DimGray · Wine Red

HEX
#705D57
RGB
rgb(112, 93, 87)
HSL
hsl(14, 13%, 39%)
HSB
hsb(14, 22%, 44%)
CMYK
cmyk(0%, 17%, 22%, 56%)
Oklch
oklch(49.5% 0.027 38.3)

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

#8F7B73

Tangerine · Gray · Warm Sun

HEX
#8F7B73
RGB
rgb(143, 123, 115)
HSL
hsl(17, 11%, 51%)
HSB
hsb(17, 20%, 56%)
CMYK
cmyk(0%, 14%, 20%, 44%)
Oklch
oklch(59.9% 0.028 43.0)

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

#ECBD53

Ginger · SandyBrown · Sunflower

HEX
#ECBD53
RGB
rgb(236, 189, 83)
HSL
hsl(42, 80%, 63%)
HSB
hsb(42, 65%, 93%)
CMYK
cmyk(0%, 20%, 65%, 7%)
Oklch
oklch(82.1% 0.134 84.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

21082C
122B08

Analogous

0F082B
21082C
2B0824

Triadic

21082C
2B2108
082B21

Split-Comp.

21082C
242B08
082B0F

Tetradic

21082C
2B0F08
122B08
08242B

Contrast Matrix WCAG 2.1 Contrast

21082C
48333E
705D57
8F7B73
ECBD53
—
1.6
Fail
3.0
Fail
4.6
AA
10.5
AAA
1.6
Fail
—
1.9
Fail
2.9
Fail
6.6
AA
3.0
Fail
1.9
Fail
—
1.5
Fail
3.5
AA Large
4.6
AA
2.9
Fail
1.5
Fail
—
2.3
Fail
10.5
AAA
6.6
AA
3.5
AA Large
2.3
Fail
—
White BG
18.5AAA
11.5AAA
6.2AA
4.0AA Large
1.8Fail
Black BG
1.1Fail
1.8Fail
3.4AA Large
5.2AA
12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

161623
3F3F3B
686858
868675
D8D76D

Deuteranopia

181921
40423B
696A59
888975
DADE73

Tritanopia

201C1B
473939
6F5A5A
8E7677
EA8185

Achromatopsia

141414
3B3B3B
626262
808080
BFBFBF

Shades & Tints Shades & Tints

#21082C

Dark
Light

#48333E

Dark
Light

#705D57

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #21082c;
  --color-2: #48333e;
  --color-3: #705d57;
  --color-4: #8f7b73;
  --color-5: #ecbd53;
}

SCSS

$color-1: #21082c;
$color-2: #48333e;
$color-3: #705d57;
$color-4: #8f7b73;
$color-5: #ecbd53;

TAILWIND

colors: {
  'brand-1': '#21082c',
  'brand-2': '#48333e',
  'brand-3': '#705d57',
  'brand-4': '#8f7b73',
  'brand-5': '#ecbd53',
}

RGB Array

[33, 8, 44], [72, 51, 62], [112, 93, 87], [143, 123, 115], [236, 189, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #21082C, #48333E, #705D57, #8F7B73, #ECBD53 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: #21082c; --color-2: #48333e; --color-3: #705d57; --color-4: #8f7b73; --color-5: #ecbd53. 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