← Back to Editor

#332B28 · #C41B32 · #F08A0E · #FFFFFF · #8F94AA

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

#332B28

Tangerine · DarkSlateGray · Cinnamon

HEX
#332B28
RGB
rgb(51, 43, 40)
HSL
hsl(16, 12%, 18%)
HSB
hsb(16, 22%, 20%)
CMYK
cmyk(0%, 16%, 22%, 80%)
Oklch
oklch(29.7% 0.013 41.7)

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

#C41B32

Vermilion · FireBrick · Passion Red

HEX
#C41B32
RGB
rgb(196, 27, 50)
HSL
hsl(352, 76%, 44%)
HSB
hsb(352, 86%, 77%)
CMYK
cmyk(0%, 86%, 74%, 23%)
Oklch
oklch(52.8% 0.199 21.8)

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

#F08A0E

Ochre · Orange · Amber Brown

HEX
#F08A0E
RGB
rgb(240, 138, 14)
HSL
hsl(33, 89%, 50%)
HSB
hsb(33, 94%, 94%)
CMYK
cmyk(0%, 43%, 94%, 6%)
Oklch
oklch(72.8% 0.166 60.9)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#8F94AA

Azure · LightSlateGray · Cobalt Blue

HEX
#8F94AA
RGB
rgb(143, 148, 170)
HSL
hsl(229, 14%, 61%)
HSB
hsb(229, 16%, 67%)
CMYK
cmyk(16%, 13%, 0%, 33%)
Oklch
oklch(67.0% 0.033 275.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

332B28
283033

Analogous

33282B
332B28
333128

Triadic

332B28
28332B
2B2833

Split-Comp.

332B28
283331
282B33

Tetradic

332B28
2B3328
283033
312833

Contrast Matrix WCAG 2.1 Contrast

332B28
C41B32
F08A0E
FFFFFF
8F94AA
—
2.3
Fail
5.5
AA
13.8
AAA
4.6
AA
2.3
Fail
—
2.4
Fail
5.9
AA
2.0
Fail
5.5
AA
2.4
Fail
—
2.5
Fail
1.2
Fail
13.8
AAA
5.9
AA
2.5
Fail
—
3.0
AA Large
4.6
AA
2.0
Fail
1.2
Fail
3.0
AA Large
—
White BG
13.8AAA
5.9AA
2.5Fail
1.0Fail
3.0AA Large
Black BG
1.5Fail
3.5AA Large
8.3AAA
21.0AAA
7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

302F29
7B792C
C4C32C
FFFFFF
9191A5

Deuteranopia

303129
85912B
CAD133
FFFFFF
9191A3

Tritanopia

332929
BC2827
EB4449
FFFFFF
8FA0A0

Achromatopsia

2D2D2D
505050
9A9A9A
FFFFFF
959595

Shades & Tints Shades & Tints

#332B28

Dark
Light

#C41B32

Dark
Light

#F08A0E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #332b28;
  --color-2: #c41b32;
  --color-3: #f08a0e;
  --color-4: #ffffff;
  --color-5: #8f94aa;
}

SCSS

$color-1: #332b28;
$color-2: #c41b32;
$color-3: #f08a0e;
$color-4: #ffffff;
$color-5: #8f94aa;

TAILWIND

colors: {
  'brand-1': '#332b28',
  'brand-2': '#c41b32',
  'brand-3': '#f08a0e',
  'brand-4': '#ffffff',
  'brand-5': '#8f94aa',
}

RGB Array

[51, 43, 40], [196, 27, 50], [240, 138, 14], [255, 255, 255], [143, 148, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #332B28, #C41B32, #F08A0E, #FFFFFF, #8F94AA 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: #332b28; --color-2: #c41b32; --color-3: #f08a0e; --color-4: #ffffff; --color-5: #8f94aa. 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