← Back to Editor

#21211E · #476200 · #7E7A1F · #C2C020 · #FBF525

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#21211E

Ink Black · Black · Dark Stone

HEX
#21211E
RGB
rgb(33, 33, 30)
HSL
hsl(60, 5%, 12%)
HSB
hsb(60, 9%, 13%)
CMYK
cmyk(0%, 0%, 9%, 87%)
Oklch
oklch(24.7% 0.006 106.8)

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

#476200

Grass Green · DarkOliveGreen · Dark Green

HEX
#476200
RGB
rgb(71, 98, 0)
HSL
hsl(77, 100%, 19%)
HSB
hsb(77, 100%, 38%)
CMYK
cmyk(28%, 0%, 100%, 62%)
Oklch
oklch(45.7% 0.117 126.1)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

#7E7A1F

Autumn Sage · Olive · Honey Gold

HEX
#7E7A1F
RGB
rgb(126, 122, 31)
HSL
hsl(57, 61%, 31%)
HSB
hsb(57, 75%, 49%)
CMYK
cmyk(0%, 3%, 75%, 51%)
Oklch
oklch(56.6% 0.109 106.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#C2C020

Autumn Sage · GoldenRod · Honey Gold

HEX
#C2C020
RGB
rgb(194, 192, 32)
HSL
hsl(59, 72%, 44%)
HSB
hsb(59, 84%, 76%)
CMYK
cmyk(0%, 1%, 84%, 24%)
Oklch
oklch(78.4% 0.163 108.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#FBF525

Autumn Sage · Yellow · Sunflower

HEX
#FBF525
RGB
rgb(251, 245, 37)
HSL
hsl(58, 96%, 56%)
HSB
hsb(58, 85%, 98%)
CMYK
cmyk(0%, 2%, 85%, 2%)
Oklch
oklch(94.5% 0.197 107.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

21211E
1D1D20

Analogous

201F1D
21211E
1F201D

Triadic

21211E
1D2020
201D20

Split-Comp.

21211E
1D1F20
1F1D20

Tetradic

21211E
1D201F
1D1D20
201D1F

Contrast Matrix WCAG 2.1 Contrast

21211E
476200
7E7A1F
C2C020
FBF525
—
2.3
Fail
3.6
AA Large
8.3
AAA
14.0
AAA
2.3
Fail
—
1.6
Fail
3.6
AA Large
6.0
AA
3.6
AA Large
1.6
Fail
—
2.3
Fail
3.9
AA Large
8.3
AAA
3.6
AA Large
2.3
Fail
—
1.7
Fail
14.0
AAA
6.0
AA
3.9
AA Large
1.7
Fail
—
White BG
16.1AAA
7.0AA
4.5AA Large
1.9Fail
1.2Fail
Black BG
1.3Fail
3.0AA Large
4.7AA
10.9AAA
18.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

21211F
535318
7C7C35
C1C147
F8F857

Deuteranopia

21211F
514F1D
7D7D3A
C1C150
F9F963

Tritanopia

211F1F
482A2F
7E464A
C2656C
FB7F88

Achromatopsia

212121
4F4F4F
717171
AEAEAE
DFDFDF

Shades & Tints Shades & Tints

#21211E

Dark
Light

#476200

Dark
Light

#7E7A1F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #21211e;
  --color-2: #476200;
  --color-3: #7e7a1f;
  --color-4: #c2c020;
  --color-5: #fbf525;
}

SCSS

$color-1: #21211e;
$color-2: #476200;
$color-3: #7e7a1f;
$color-4: #c2c020;
$color-5: #fbf525;

TAILWIND

colors: {
  'brand-1': '#21211e',
  'brand-2': '#476200',
  'brand-3': '#7e7a1f',
  'brand-4': '#c2c020',
  'brand-5': '#fbf525',
}

RGB Array

[33, 33, 30], [71, 98, 0], [126, 122, 31], [194, 192, 32], [251, 245, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #21211E, #476200, #7E7A1F, #C2C020, #FBF525 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #21211e; --color-2: #476200; --color-3: #7e7a1f; --color-4: #c2c020; --color-5: #fbf525. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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