← Back to Editor

#B82306 · #332E2E · #4A4242 · #ABD2D9 · #A0F2DE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#B82306

Vermilion · FireBrick · Wine Red

HEX
#B82306
RGB
rgb(184, 35, 6)
HSL
hsl(10, 94%, 37%)
HSB
hsb(10, 97%, 72%)
CMYK
cmyk(0%, 81%, 97%, 28%)
Oklch
oklch(50.7% 0.187 32.1)

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

#332E2E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#332E2E
RGB
rgb(51, 46, 46)
HSL
hsl(0, 5%, 19%)
HSB
hsb(0, 10%, 20%)
CMYK
cmyk(0%, 10%, 10%, 80%)
Oklch
oklch(30.6% 0.007 17.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#4A4242

Dark Cyan · DarkSlateGray · Charcoal

HEX
#4A4242
RGB
rgb(74, 66, 66)
HSL
hsl(0, 6%, 27%)
HSB
hsb(0, 11%, 29%)
CMYK
cmyk(0%, 11%, 11%, 71%)
Oklch
oklch(38.7% 0.011 17.6)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#ABD2D9

Sky Blue · LightBlue · Glacier Blue

HEX
#ABD2D9
RGB
rgb(171, 210, 217)
HSL
hsl(189, 38%, 76%)
HSB
hsb(189, 21%, 85%)
CMYK
cmyk(21%, 3%, 0%, 15%)
Oklch
oklch(83.8% 0.042 209.7)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#A0F2DE

Jade · LightBlue · Glacier Blue

HEX
#A0F2DE
RGB
rgb(160, 242, 222)
HSL
hsl(165, 76%, 79%)
HSB
hsb(165, 34%, 95%)
CMYK
cmyk(34%, 0%, 8%, 5%)
Oklch
oklch(90.3% 0.085 177.2)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B82306
0699B7

Analogous

B70641
B82306
B77C06

Triadic

B82306
06B723
2306B7

Split-Comp.

B82306
06B77C
0641B7

Tetradic

B82306
41B706
0699B7
7C06B7

Contrast Matrix WCAG 2.1 Contrast

B82306
332E2E
4A4242
ABD2D9
A0F2DE
—
2.1
Fail
1.5
Fail
3.9
AA Large
5.0
AA
2.1
Fail
—
1.4
Fail
8.2
AAA
10.3
AAA
1.5
Fail
1.4
Fail
—
6.0
AA
7.6
AAA
3.9
AA Large
8.2
AAA
6.0
AA
—
1.3
Fail
5.0
AA
10.3
AAA
7.6
AAA
1.3
Fail
—
White BG
6.4AA
13.4AAA
9.8AAA
1.6Fail
1.3Fail
Black BG
3.3AA Large
1.6Fail
2.1Fail
13.0AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

77760D
31312E
474642
BCBCD7
C4C4E3

Deuteranopia

808B0F
31312E
474842
BAB7D7
BFB9E4

Tritanopia

B11314
332E2E
4A4242
ADD6D6
A4E7E8

Achromatopsia

4C4C4C
2F2F2F
444444
C7C7C7
D7D7D7

Shades & Tints Shades & Tints

#B82306

Dark
Light

#332E2E

Dark
Light

#4A4242

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b82306;
  --color-2: #332e2e;
  --color-3: #4a4242;
  --color-4: #abd2d9;
  --color-5: #a0f2de;
}

SCSS

$color-1: #b82306;
$color-2: #332e2e;
$color-3: #4a4242;
$color-4: #abd2d9;
$color-5: #a0f2de;

TAILWIND

colors: {
  'brand-1': '#b82306',
  'brand-2': '#332e2e',
  'brand-3': '#4a4242',
  'brand-4': '#abd2d9',
  'brand-5': '#a0f2de',
}

RGB Array

[184, 35, 6], [51, 46, 46], [74, 66, 66], [171, 210, 217], [160, 242, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B82306, #332E2E, #4A4242, #ABD2D9, #A0F2DE 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: #b82306; --color-2: #332e2e; --color-3: #4a4242; --color-4: #abd2d9; --color-5: #a0f2de. 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