← Back to Editor

#211309 · #523D14 · #854D20 · #B35127 · #D9422B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#211309

Tangerine · Black · Cinnamon

HEX
#211309
RGB
rgb(33, 19, 9)
HSL
hsl(25, 57%, 8%)
HSB
hsb(25, 73%, 13%)
CMYK
cmyk(0%, 42%, 73%, 87%)
Oklch
oklch(20.3% 0.030 55.8)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#523D14

Ochre · DarkOliveGreen · Amber Gold

HEX
#523D14
RGB
rgb(82, 61, 20)
HSL
hsl(40, 61%, 20%)
HSB
hsb(40, 76%, 32%)
CMYK
cmyk(0%, 26%, 76%, 68%)
Oklch
oklch(37.4% 0.064 81.1)

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

#854D20

Tangerine · Sienna · Amber Brown

HEX
#854D20
RGB
rgb(133, 77, 32)
HSL
hsl(27, 61%, 32%)
HSB
hsb(27, 76%, 52%)
CMYK
cmyk(0%, 42%, 76%, 48%)
Oklch
oklch(47.8% 0.096 56.2)

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

#B35127

Tangerine · Sienna · Amber Brown

HEX
#B35127
RGB
rgb(179, 81, 39)
HSL
hsl(18, 64%, 43%)
HSB
hsb(18, 78%, 70%)
CMYK
cmyk(0%, 55%, 78%, 30%)
Oklch
oklch(55.3% 0.139 42.0)

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

#D9422B

Vermilion · Chocolate · Passion Red

HEX
#D9422B
RGB
rgb(217, 66, 43)
HSL
hsl(8, 70%, 51%)
HSB
hsb(8, 80%, 85%)
CMYK
cmyk(0%, 70%, 80%, 15%)
Oklch
oklch(59.5% 0.191 31.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

211309
091620

Analogous

20090B
211309
201E09

Triadic

211309
092012
120920

Split-Comp.

211309
09201E
090B20

Tetradic

211309
0B2009
091620
1E0920

Contrast Matrix WCAG 2.1 Contrast

211309
523D14
854D20
B35127
D9422B
—
1.8
Fail
2.7
Fail
3.5
AA Large
4.1
AA Large
1.8
Fail
—
1.5
Fail
2.0
Fail
2.3
Fail
2.7
Fail
1.5
Fail
—
1.3
Fail
1.5
Fail
3.5
AA Large
2.0
Fail
1.3
Fail
—
1.2
Fail
4.1
AA Large
2.3
Fail
1.5
Fail
1.2
Fail
—
White BG
18.1AAA
10.3AAA
6.8AA
5.1AA
4.4AA Large
Black BG
1.2Fail
2.0Fail
3.1AA Large
4.1AA Large
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1B1B0B
49491E
6D6C2B
898831
989631

Deuteranopia

1C1D0C
4A4C20
70742E
8E9634
A0AC32

Tritanopia

200D0E
512627
823335
AE393B
D13536

Achromatopsia

161616
3F3F3F
595959
6A6A6A
6D6D6D

Shades & Tints Shades & Tints

#211309

Dark
Light

#523D14

Dark
Light

#854D20

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #211309;
  --color-2: #523d14;
  --color-3: #854d20;
  --color-4: #b35127;
  --color-5: #d9422b;
}

SCSS

$color-1: #211309;
$color-2: #523d14;
$color-3: #854d20;
$color-4: #b35127;
$color-5: #d9422b;

TAILWIND

colors: {
  'brand-1': '#211309',
  'brand-2': '#523d14',
  'brand-3': '#854d20',
  'brand-4': '#b35127',
  'brand-5': '#d9422b',
}

RGB Array

[33, 19, 9], [82, 61, 20], [133, 77, 32], [179, 81, 39], [217, 66, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #211309, #523D14, #854D20, #B35127, #D9422B is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #211309; --color-2: #523d14; --color-3: #854d20; --color-4: #b35127; --color-5: #d9422b. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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