← Back to Editor

#524B43 · #8C1207 · #AF0E04 · #C9581E · #E08F4D

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 App

Color Details Color Details

#524B43

Ochre · DarkSlateGray · Amber Brown

HEX
#524B43
RGB
rgb(82, 75, 67)
HSL
hsl(32, 10%, 29%)
HSB
hsb(32, 18%, 32%)
CMYK
cmyk(0%, 9%, 18%, 68%)
Oklch
oklch(41.7% 0.016 71.1)

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

#8C1207

Vermilion · DarkRed · Wine Red

HEX
#8C1207
RGB
rgb(140, 18, 7)
HSL
hsl(5, 90%, 29%)
HSB
hsb(5, 95%, 55%)
CMYK
cmyk(0%, 87%, 95%, 45%)
Oklch
oklch(41.1% 0.157 30.1)

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

#AF0E04

Vermilion · FireBrick · Wine Red

HEX
#AF0E04
RGB
rgb(175, 14, 4)
HSL
hsl(4, 96%, 35%)
HSB
hsb(4, 98%, 69%)
CMYK
cmyk(0%, 92%, 98%, 31%)
Oklch
oklch(47.8% 0.190 29.8)

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

#C9581E

Tangerine · Chocolate · Amber Brown

HEX
#C9581E
RGB
rgb(201, 88, 30)
HSL
hsl(20, 74%, 45%)
HSB
hsb(20, 85%, 79%)
CMYK
cmyk(0%, 56%, 85%, 21%)
Oklch
oklch(59.6% 0.159 43.8)

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

#E08F4D

Tangerine · SandyBrown · Warm Sun

HEX
#E08F4D
RGB
rgb(224, 143, 77)
HSL
hsl(27, 70%, 59%)
HSB
hsb(27, 66%, 88%)
CMYK
cmyk(0%, 36%, 66%, 12%)
Oklch
oklch(72.1% 0.128 57.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

524B43
434951

Analogous

514343
524B43
515143

Triadic

524B43
43514A
4A4351

Split-Comp.

524B43
435151
434351

Tetradic

524B43
435143
434951
514351

Contrast Matrix WCAG 2.1 Contrast

524B43
8C1207
AF0E04
C9581E
E08F4D
—
1.1
Fail
1.2
Fail
2.0
Fail
3.4
AA Large
1.1
Fail
—
1.3
Fail
2.2
Fail
3.7
AA Large
1.2
Fail
1.3
Fail
—
1.7
Fail
2.8
Fail
2.0
Fail
2.2
Fail
1.7
Fail
—
1.7
Fail
3.4
AA Large
3.7
AA Large
2.8
Fail
1.7
Fail
—
White BG
8.6AAA
9.5AAA
7.3AAA
4.3AA Large
2.6Fail
Black BG
2.4Fail
2.2Fail
2.9Fail
4.9AA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4F4F45
57560A
696806
98972C
BDBC5D

Deuteranopia

4F5045
5E670A
737F07
9FA72F
C2C861

Tritanopia

524647
860C0C
A70809
C3373A
DC6A6C

Achromatopsia

4C4C4C
353535
3D3D3D
737373
A0A0A0

Shades & Tints Shades & Tints

#524B43

Dark
Light

#8C1207

Dark
Light

#AF0E04

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #524b43;
  --color-2: #8c1207;
  --color-3: #af0e04;
  --color-4: #c9581e;
  --color-5: #e08f4d;
}

SCSS

$color-1: #524b43;
$color-2: #8c1207;
$color-3: #af0e04;
$color-4: #c9581e;
$color-5: #e08f4d;

TAILWIND

colors: {
  'brand-1': '#524b43',
  'brand-2': '#8c1207',
  'brand-3': '#af0e04',
  'brand-4': '#c9581e',
  'brand-5': '#e08f4d',
}

RGB Array

[82, 75, 67], [140, 18, 7], [175, 14, 4], [201, 88, 30], [224, 143, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #524B43, #8C1207, #AF0E04, #C9581E, #E08F4D is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. 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: #524b43; --color-2: #8c1207; --color-3: #af0e04; --color-4: #c9581e; --color-5: #e08f4d. 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. 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