← Back to Editor

#202020 · #494948 · #7C7C72 · #A5A375 · #C0BD5C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarm

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#202020

Ink Black · Black · Dark Stone

HEX
#202020
RGB
rgb(32, 32, 32)
HSL
hsl(0, 0%, 13%)
HSB
hsb(0, 0%, 13%)
CMYK
cmyk(0%, 0%, 0%, 87%)
Oklch
oklch(24.4% 0.000 89.9)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

#494948

Dark Cyan · DarkSlateGray · Charcoal

HEX
#494948
RGB
rgb(73, 73, 72)
HSL
hsl(60, 1%, 28%)
HSB
hsb(60, 1%, 29%)
CMYK
cmyk(0%, 0%, 1%, 71%)
Oklch
oklch(40.5% 0.002 106.5)

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

#7C7C72

Ink Gray · Gray · Warm Gray

HEX
#7C7C72
RGB
rgb(124, 124, 114)
HSL
hsl(60, 4%, 47%)
HSB
hsb(60, 8%, 49%)
CMYK
cmyk(0%, 0%, 8%, 51%)
Oklch
oklch(58.3% 0.015 106.9)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#A5A375

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A5A375
RGB
rgb(165, 163, 117)
HSL
hsl(57, 21%, 55%)
HSB
hsb(57, 29%, 65%)
CMYK
cmyk(0%, 1%, 29%, 35%)
Oklch
oklch(70.6% 0.063 105.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#C0BD5C

Autumn Sage · Tan · Sunflower

HEX
#C0BD5C
RGB
rgb(192, 189, 92)
HSL
hsl(58, 44%, 56%)
HSB
hsb(58, 52%, 75%)
CMYK
cmyk(0%, 2%, 52%, 25%)
Oklch
oklch(78.1% 0.120 107.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

202020
212121

Analogous

212121
202020
212121

Triadic

202020
212121
212121

Split-Comp.

202020
212121
212121

Tetradic

202020
212121
212121
212121

Contrast Matrix WCAG 2.1 Contrast

202020
494948
7C7C72
A5A375
C0BD5C
—
1.8
Fail
3.9
AA Large
6.3
AA
8.3
AAA
1.8
Fail
—
2.1
Fail
3.5
AA Large
4.6
AA
3.9
AA Large
2.1
Fail
—
1.6
Fail
2.1
Fail
6.3
AA
3.5
AA Large
1.6
Fail
—
1.3
Fail
8.3
AAA
4.6
AA
2.1
Fail
1.3
Fail
—
White BG
16.3AAA
9.0AAA
4.2AA Large
2.6Fail
2.0Fail
Black BG
1.3Fail
2.3Fail
5.0AA
8.1AAA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

202020
494948
7C7C74
A4A480
BFBF73

Deuteranopia

202020
494948
7C7C75
A4A483
BFBF79

Tritanopia

202020
494848
7C7677
A5898B
C0868A

Achromatopsia

202020
494949
7B7B7B
9E9E9E
B3B3B3

Shades & Tints Shades & Tints

#202020

Dark
Light

#494948

Dark
Light

#7C7C72

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #202020;
  --color-2: #494948;
  --color-3: #7c7c72;
  --color-4: #a5a375;
  --color-5: #c0bd5c;
}

SCSS

$color-1: #202020;
$color-2: #494948;
$color-3: #7c7c72;
$color-4: #a5a375;
$color-5: #c0bd5c;

TAILWIND

colors: {
  'brand-1': '#202020',
  'brand-2': '#494948',
  'brand-3': '#7c7c72',
  'brand-4': '#a5a375',
  'brand-5': '#c0bd5c',
}

RGB Array

[32, 32, 32], [73, 73, 72], [124, 124, 114], [165, 163, 117], [192, 189, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #202020, #494948, #7C7C72, #A5A375, #C0BD5C is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #202020; --color-2: #494948; --color-3: #7c7c72; --color-4: #a5a375; --color-5: #c0bd5c. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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