← Back to Editor

#565754 · #AE7A18 · #B44708 · #8A0D18 · #541D3C

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

#565754

Ink Gray · DimGray · Charcoal

HEX
#565754
RGB
rgb(86, 87, 84)
HSL
hsl(80, 2%, 34%)
HSB
hsb(80, 3%, 34%)
CMYK
cmyk(1%, 0%, 3%, 66%)
Oklch
oklch(45.5% 0.005 121.7)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#AE7A18

Ochre · DarkGoldenRod · Amber Brown

HEX
#AE7A18
RGB
rgb(174, 122, 24)
HSL
hsl(39, 76%, 39%)
HSB
hsb(39, 86%, 68%)
CMYK
cmyk(0%, 30%, 86%, 32%)
Oklch
oklch(61.7% 0.122 76.9)

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

#B44708

Tangerine · Sienna · Amber Brown

HEX
#B44708
RGB
rgb(180, 71, 8)
HSL
hsl(22, 91%, 37%)
HSB
hsb(22, 96%, 71%)
CMYK
cmyk(0%, 61%, 96%, 29%)
Oklch
oklch(53.8% 0.155 43.2)

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

#8A0D18

Vermilion · DarkRed · Wine Red

HEX
#8A0D18
RGB
rgb(138, 13, 24)
HSL
hsl(355, 83%, 30%)
HSB
hsb(355, 91%, 54%)
CMYK
cmyk(0%, 91%, 83%, 46%)
Oklch
oklch(40.5% 0.156 24.8)

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

#541D3C

Rose Purple · DarkSlateGray · Raspberry

HEX
#541D3C
RGB
rgb(84, 29, 60)
HSL
hsl(326, 49%, 22%)
HSB
hsb(326, 65%, 33%)
CMYK
cmyk(0%, 65%, 29%, 67%)
Oklch
oklch(32.6% 0.091 348.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

565754
565558

Analogous

585855
565754
565855

Triadic

565754
555758
585557

Split-Comp.

565754
555658
585558

Tetradic

565754
555858
565558
585556

Contrast Matrix WCAG 2.1 Contrast

565754
AE7A18
B44708
8A0D18
541D3C
—
1.9
Fail
1.3
Fail
1.3
Fail
1.8
Fail
1.9
Fail
—
1.5
Fail
2.6
Fail
3.5
AA Large
1.3
Fail
1.5
Fail
—
1.8
Fail
2.4
Fail
1.3
Fail
2.6
Fail
1.8
Fail
—
1.3
Fail
1.8
Fail
3.5
AA Large
2.4
Fail
1.3
Fail
—
White BG
7.3AAA
3.8AA Large
5.5AA
9.8AAA
13.0AAA
Black BG
2.9Fail
5.6AA
3.8AA Large
2.2Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

565655
979730
858417
545315
3C3C34

Deuteranopia

565655
9B9E35
8B931B
5B6515
3F4433

Tritanopia

565555
AB4247
AF2326
841313
512F2D

Achromatopsia

565656
7E7E7E
606060
343434
313131

Shades & Tints Shades & Tints

#565754

Dark
Light

#AE7A18

Dark
Light

#B44708

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #565754;
  --color-2: #ae7a18;
  --color-3: #b44708;
  --color-4: #8a0d18;
  --color-5: #541d3c;
}

SCSS

$color-1: #565754;
$color-2: #ae7a18;
$color-3: #b44708;
$color-4: #8a0d18;
$color-5: #541d3c;

TAILWIND

colors: {
  'brand-1': '#565754',
  'brand-2': '#ae7a18',
  'brand-3': '#b44708',
  'brand-4': '#8a0d18',
  'brand-5': '#541d3c',
}

RGB Array

[86, 87, 84], [174, 122, 24], [180, 71, 8], [138, 13, 24], [84, 29, 60]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #565754, #AE7A18, #B44708, #8A0D18, #541D3C 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: #565754; --color-2: #ae7a18; --color-3: #b44708; --color-4: #8a0d18; --color-5: #541d3c. 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