← Back to Editor

#470F0F · #680000 · #E3E2E2 · #D4D3D3 · #C5C4C4

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

#470F0F

Vermilion · Maroon · Deep Berry

HEX
#470F0F
RGB
rgb(71, 15, 15)
HSL
hsl(0, 65%, 17%)
HSB
hsb(0, 79%, 28%)
CMYK
cmyk(0%, 79%, 79%, 72%)
Oklch
oklch(26.8% 0.085 25.0)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#680000

Vermilion · Maroon · Deep Berry

HEX
#680000
RGB
rgb(104, 0, 0)
HSL
hsl(0, 100%, 20%)
HSB
hsb(0, 100%, 41%)
CMYK
cmyk(0%, 100%, 100%, 59%)
Oklch
oklch(32.5% 0.133 29.2)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#E3E2E2

Plain White · Lavender · Cloud White

HEX
#E3E2E2
RGB
rgb(227, 226, 226)
HSL
hsl(0, 2%, 89%)
HSB
hsb(0, 0%, 89%)
CMYK
cmyk(0%, 0%, 0%, 11%)
Oklch
oklch(91.4% 0.001 17.2)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#D4D3D3

Silver Gray · LightGray · Pearl Gray

HEX
#D4D3D3
RGB
rgb(212, 211, 211)
HSL
hsl(0, 1%, 83%)
HSB
hsb(0, 0%, 83%)
CMYK
cmyk(0%, 0%, 0%, 17%)
Oklch
oklch(86.8% 0.001 17.2)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#C5C4C4

Silver Gray · Silver · Pearl Gray

HEX
#C5C4C4
RGB
rgb(197, 196, 196)
HSL
hsl(0, 1%, 77%)
HSB
hsb(0, 1%, 77%)
CMYK
cmyk(0%, 1%, 1%, 23%)
Oklch
oklch(82.1% 0.001 17.2)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

470F0F
0F4848

Analogous

480F2B
470F0F
482B0F

Triadic

470F0F
0F480F
0F0F48

Split-Comp.

470F0F
0F482B
0F2B48

Tetradic

470F0F
2B480F
0F4848
2B0F48

Contrast Matrix WCAG 2.1 Contrast

470F0F
680000
E3E2E2
D4D3D3
C5C4C4
—
1.2
Fail
12.1
AAA
10.5
AAA
9.0
AAA
1.2
Fail
—
10.2
AAA
8.8
AAA
7.6
AAA
12.1
AAA
10.2
AAA
—
1.2
Fail
1.3
Fail
10.5
AAA
8.8
AAA
1.2
Fail
—
1.2
Fail
9.0
AAA
7.6
AAA
1.3
Fail
1.2
Fail
—
White BG
15.6AAA
13.2AAA
1.3Fail
1.5Fail
1.7Fail
Black BG
1.3Fail
1.6Fail
16.2AAA
14.1AAA
12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2E0F
3B3A00
E3E3E2
D4D4D3
C5C5C4

Deuteranopia

32360F
414900
E3E3E2
D4D4D3
C5C5C4

Tritanopia

440F0F
630000
E3E2E2
D4D3D3
C5C4C4

Achromatopsia

202020
1F1F1F
E2E2E2
D3D3D3
C4C4C4

Shades & Tints Shades & Tints

#470F0F

Dark
Light

#680000

Dark
Light

#E3E2E2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #470f0f;
  --color-2: #680000;
  --color-3: #e3e2e2;
  --color-4: #d4d3d3;
  --color-5: #c5c4c4;
}

SCSS

$color-1: #470f0f;
$color-2: #680000;
$color-3: #e3e2e2;
$color-4: #d4d3d3;
$color-5: #c5c4c4;

TAILWIND

colors: {
  'brand-1': '#470f0f',
  'brand-2': '#680000',
  'brand-3': '#e3e2e2',
  'brand-4': '#d4d3d3',
  'brand-5': '#c5c4c4',
}

RGB Array

[71, 15, 15], [104, 0, 0], [227, 226, 226], [212, 211, 211], [197, 196, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #470F0F, #680000, #E3E2E2, #D4D3D3, #C5C4C4 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: #470f0f; --color-2: #680000; --color-3: #e3e2e2; --color-4: #d4d3d3; --color-5: #c5c4c4. 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