← Back to Editor

#030303 · #830C12 · #C71515 · #303030 · #414546

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

#030303

Ink Black · Black · Jet Black

HEX
#030303
RGB
rgb(3, 3, 3)
HSL
hsl(0, 0%, 1%)
HSB
hsb(0, 0%, 1%)
CMYK
cmyk(0%, 0%, 0%, 99%)
Oklch
oklch(9.7% 0.000 89.9)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#830C12

Vermilion · Maroon · Wine Red

HEX
#830C12
RGB
rgb(131, 12, 18)
HSL
hsl(357, 83%, 28%)
HSB
hsb(357, 91%, 51%)
CMYK
cmyk(0%, 91%, 86%, 49%)
Oklch
oklch(39.0% 0.150 26.3)

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

#C71515

Vermilion · FireBrick · Passion Red

HEX
#C71515
RGB
rgb(199, 21, 21)
HSL
hsl(0, 81%, 43%)
HSB
hsb(0, 89%, 78%)
CMYK
cmyk(0%, 89%, 89%, 22%)
Oklch
oklch(52.8% 0.207 28.2)

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

#303030

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#303030
RGB
rgb(48, 48, 48)
HSL
hsl(0, 0%, 19%)
HSB
hsb(0, 0%, 19%)
CMYK
cmyk(0%, 0%, 0%, 81%)
Oklch
oklch(30.9% 0.000 89.9)

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

#414546

Dark Cyan · DarkSlateGray · Charcoal

HEX
#414546
RGB
rgb(65, 69, 70)
HSL
hsl(192, 4%, 26%)
HSB
hsb(192, 7%, 27%)
CMYK
cmyk(7%, 1%, 0%, 73%)
Oklch
oklch(38.7% 0.006 214.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

030303
030303

Analogous

030303
030303
030303

Triadic

030303
030303
030303

Split-Comp.

030303
030303
030303

Tetradic

030303
030303
030303
030303

Contrast Matrix WCAG 2.1 Contrast

030303
830C12
C71515
303030
414546
—
2.0
Fail
3.5
AA Large
1.6
Fail
2.1
Fail
2.0
Fail
—
1.8
Fail
1.3
Fail
1.1
Fail
3.5
AA Large
1.8
Fail
—
2.2
Fail
1.6
Fail
1.6
Fail
1.3
Fail
2.2
Fail
—
1.4
Fail
2.1
Fail
1.1
Fail
1.6
Fail
1.4
Fail
—
White BG
20.6AAA
10.4AAA
5.9AA
13.2AAA
9.7AAA
Black BG
1.0Fail
2.0Fail
3.5AA Large
1.6Fail
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

030303
4F4E11
7A7815
303030
434346

Deuteranopia

030303
565F10
849215
303030
434246

Tritanopia

030303
7D0F0F
BE1515
303030
414646

Achromatopsia

030303
303030
4A4A4A
303030
444444

Shades & Tints Shades & Tints

#030303

Dark
Light

#830C12

Dark
Light

#C71515

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #030303;
  --color-2: #830c12;
  --color-3: #c71515;
  --color-4: #303030;
  --color-5: #414546;
}

SCSS

$color-1: #030303;
$color-2: #830c12;
$color-3: #c71515;
$color-4: #303030;
$color-5: #414546;

TAILWIND

colors: {
  'brand-1': '#030303',
  'brand-2': '#830c12',
  'brand-3': '#c71515',
  'brand-4': '#303030',
  'brand-5': '#414546',
}

RGB Array

[3, 3, 3], [131, 12, 18], [199, 21, 21], [48, 48, 48], [65, 69, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #030303, #830C12, #C71515, #303030, #414546 is ideal for: tech websites, dark mode UIs, game UIs, 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: #030303; --color-2: #830c12; --color-3: #c71515; --color-4: #303030; --color-5: #414546. 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. 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