← Back to Editor

#222222 · #DCD071 · #DFD4A0 · #F0E9E0 · #BBAAAA

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

#222222

Ink Black · Black · Dark Stone

HEX
#222222
RGB
rgb(34, 34, 34)
HSL
hsl(0, 0%, 13%)
HSB
hsb(0, 0%, 13%)
CMYK
cmyk(0%, 0%, 0%, 87%)
Oklch
oklch(25.2% 0.000 89.9)

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

#DCD071

Fresh Green · BurlyWood · Sunflower

HEX
#DCD071
RGB
rgb(220, 208, 113)
HSL
hsl(53, 60%, 65%)
HSB
hsb(53, 49%, 86%)
CMYK
cmyk(0%, 5%, 49%, 14%)
Oklch
oklch(84.8% 0.118 102.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#DFD4A0

Fresh Green · Wheat · Sunflower

HEX
#DFD4A0
RGB
rgb(223, 212, 160)
HSL
hsl(50, 50%, 75%)
HSB
hsb(50, 28%, 87%)
CMYK
cmyk(0%, 5%, 28%, 13%)
Oklch
oklch(86.6% 0.069 97.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#F0E9E0

Goose Yellow · Beige · Peach Orange

HEX
#F0E9E0
RGB
rgb(240, 233, 224)
HSL
hsl(34, 35%, 91%)
HSB
hsb(34, 7%, 94%)
CMYK
cmyk(0%, 3%, 7%, 6%)
Oklch
oklch(93.7% 0.014 74.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#BBAAAA

Peach Pink · DarkGray · Coral Red

HEX
#BBAAAA
RGB
rgb(187, 170, 170)
HSL
hsl(0, 11%, 70%)
HSB
hsb(0, 9%, 73%)
CMYK
cmyk(0%, 9%, 9%, 27%)
Oklch
oklch(75.2% 0.020 17.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

222222
212121

Analogous

212121
222222
212121

Triadic

222222
212121
212121

Split-Comp.

222222
212121
212121

Tetradic

222222
212121
212121
212121

Contrast Matrix WCAG 2.1 Contrast

222222
DCD071
DFD4A0
F0E9E0
BBAAAA
—
10.1
AAA
10.7
AAA
13.2
AAA
7.2
AAA
10.1
AAA
—
1.1
Fail
1.3
Fail
1.4
Fail
10.7
AAA
1.1
Fail
—
1.2
Fail
1.5
Fail
13.2
AAA
1.3
Fail
1.2
Fail
—
1.8
Fail
7.2
AAA
1.4
Fail
1.5
Fail
1.8
Fail
—
White BG
15.9AAA
1.6Fail
1.5Fail
1.2Fail
2.2Fail
Black BG
1.3Fail
13.3AAA
14.1AAA
17.4AAA
9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

222222
D7D788
DADAAD
EDEDE2
B4B3AA

Deuteranopia

222222
D8D88E
DBDCB0
EDEEE3
B5B6AA

Tritanopia

222222
DB9A9E
DEB7B9
F0E4E4
BAAAAA

Achromatopsia

222222
C9C9C9
D1D1D1
EAEAEA
AFAFAF

Shades & Tints Shades & Tints

#222222

Dark
Light

#DCD071

Dark
Light

#DFD4A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #222222;
  --color-2: #dcd071;
  --color-3: #dfd4a0;
  --color-4: #f0e9e0;
  --color-5: #bbaaaa;
}

SCSS

$color-1: #222222;
$color-2: #dcd071;
$color-3: #dfd4a0;
$color-4: #f0e9e0;
$color-5: #bbaaaa;

TAILWIND

colors: {
  'brand-1': '#222222',
  'brand-2': '#dcd071',
  'brand-3': '#dfd4a0',
  'brand-4': '#f0e9e0',
  'brand-5': '#bbaaaa',
}

RGB Array

[34, 34, 34], [220, 208, 113], [223, 212, 160], [240, 233, 224], [187, 170, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #222222, #DCD071, #DFD4A0, #F0E9E0, #BBAAAA 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: #222222; --color-2: #dcd071; --color-3: #dfd4a0; --color-4: #f0e9e0; --color-5: #bbaaaa. 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