← Back to Editor

#2A2124 · #B54247 · #F85F57 · #D38869 · #816F59

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

#2A2124

Dark Violet · DarkSlateGray · Raspberry

HEX
#2A2124
RGB
rgb(42, 33, 36)
HSL
hsl(340, 12%, 15%)
HSB
hsb(340, 21%, 16%)
CMYK
cmyk(0%, 21%, 14%, 84%)
Oklch
oklch(25.9% 0.015 356.2)

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

#B54247

Crimson · Sienna · Passion Red

HEX
#B54247
RGB
rgb(181, 66, 71)
HSL
hsl(357, 47%, 48%)
HSB
hsb(357, 64%, 71%)
CMYK
cmyk(0%, 64%, 61%, 29%)
Oklch
oklch(54.0% 0.149 21.1)

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

#F85F57

Peach Pink · Tomato · Coral Red

HEX
#F85F57
RGB
rgb(248, 95, 87)
HSL
hsl(3, 92%, 66%)
HSB
hsb(3, 65%, 97%)
CMYK
cmyk(0%, 62%, 65%, 3%)
Oklch
oklch(68.3% 0.189 26.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D38869

Apricot · DarkSalmon · Warm Sun

HEX
#D38869
RGB
rgb(211, 136, 105)
HSL
hsl(18, 55%, 62%)
HSB
hsb(18, 50%, 83%)
CMYK
cmyk(0%, 36%, 50%, 17%)
Oklch
oklch(69.7% 0.102 43.1)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#816F59

Ochre · DimGray · Amber Brown

HEX
#816F59
RGB
rgb(129, 111, 89)
HSL
hsl(33, 18%, 43%)
HSB
hsb(33, 31%, 51%)
CMYK
cmyk(0%, 14%, 31%, 49%)
Oklch
oklch(55.3% 0.040 72.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A2124
222B28

Analogous

2B2229
2A2124
2B2322

Triadic

2A2124
252B22
22252B

Split-Comp.

2A2124
222B23
22292B

Tetradic

2A2124
292B22
222B28
23222B

Contrast Matrix WCAG 2.1 Contrast

2A2124
B54247
F85F57
D38869
816F59
—
2.9
Fail
5.0
AA
5.6
AA
3.2
AA Large
2.9
Fail
—
1.8
Fail
2.0
Fail
1.1
Fail
5.0
AA
1.8
Fail
—
1.1
Fail
1.6
Fail
5.6
AA
2.0
Fail
1.1
Fail
—
1.7
Fail
3.2
AA Large
1.1
Fail
1.6
Fail
1.7
Fail
—
White BG
15.7AAA
5.5AA
3.1AA Large
2.8Fail
4.8AA
Black BG
1.3Fail
3.8AA Large
6.8AA
7.5AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

262623
838246
B6B459
B3B271
79795E

Deuteranopia

272723
8A9346
BFCA59
B7BD72
7A7C60

Tritanopia

2A2323
AF4545
F05A5B
CF7678
806363

Achromatopsia

242424
656565
8C8C8C
9B9B9B
727272

Shades & Tints Shades & Tints

#2A2124

Dark
Light

#B54247

Dark
Light

#F85F57

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a2124;
  --color-2: #b54247;
  --color-3: #f85f57;
  --color-4: #d38869;
  --color-5: #816f59;
}

SCSS

$color-1: #2a2124;
$color-2: #b54247;
$color-3: #f85f57;
$color-4: #d38869;
$color-5: #816f59;

TAILWIND

colors: {
  'brand-1': '#2a2124',
  'brand-2': '#b54247',
  'brand-3': '#f85f57',
  'brand-4': '#d38869',
  'brand-5': '#816f59',
}

RGB Array

[42, 33, 36], [181, 66, 71], [248, 95, 87], [211, 136, 105], [129, 111, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2A2124, #B54247, #F85F57, #D38869, #816F59 is ideal for: 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: #2a2124; --color-2: #b54247; --color-3: #f85f57; --color-4: #d38869; --color-5: #816f59. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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