← Back to Editor

#221D26 · #6A8572 · #6B827B · #C7BFC1 · #CCC4AD

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

#221D26

Dark Plum · Black · Dark Purple

HEX
#221D26
RGB
rgb(34, 29, 38)
HSL
hsl(273, 13%, 13%)
HSB
hsb(273, 24%, 15%)
CMYK
cmyk(11%, 24%, 0%, 85%)
Oklch
oklch(24.0% 0.018 310.0)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#6A8572

Celadon · Gray · Olive Green

HEX
#6A8572
RGB
rgb(106, 133, 114)
HSL
hsl(138, 11%, 47%)
HSB
hsb(138, 20%, 52%)
CMYK
cmyk(20%, 0%, 14%, 48%)
Oklch
oklch(59.0% 0.042 154.3)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#6B827B

Mineral Blue · Gray · Mint Ice

HEX
#6B827B
RGB
rgb(107, 130, 123)
HSL
hsl(162, 10%, 46%)
HSB
hsb(162, 18%, 51%)
CMYK
cmyk(18%, 0%, 5%, 49%)
Oklch
oklch(58.6% 0.029 174.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#C7BFC1

Silver Gray · Silver · Pearl Gray

HEX
#C7BFC1
RGB
rgb(199, 191, 193)
HSL
hsl(345, 7%, 76%)
HSB
hsb(345, 4%, 78%)
CMYK
cmyk(0%, 4%, 3%, 22%)
Oklch
oklch(81.2% 0.009 0.2)

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

#CCC4AD

Goose Yellow · Silver · Sunflower

HEX
#CCC4AD
RGB
rgb(204, 196, 173)
HSL
hsl(45, 23%, 74%)
HSB
hsb(45, 15%, 80%)
CMYK
cmyk(0%, 4%, 15%, 20%)
Oklch
oklch(82.1% 0.033 91.1)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

221D26
21251D

Analogous

1D1D25
221D26
251D25

Triadic

221D26
25221D
1D2522

Split-Comp.

221D26
25251D
1D251D

Tetradic

221D26
251D1D
21251D
1D2525

Contrast Matrix WCAG 2.1 Contrast

221D26
6A8572
6B827B
C7BFC1
CCC4AD
—
4.1
AA Large
4.0
AA Large
9.2
AAA
9.5
AAA
4.1
AA Large
—
1.0
Fail
2.2
Fail
2.3
Fail
4.0
AA Large
1.0
Fail
—
2.3
Fail
2.4
Fail
9.2
AAA
2.2
Fail
2.3
Fail
—
1.0
Fail
9.5
AAA
2.3
Fail
2.4
Fail
1.0
Fail
—
White BG
16.5AAA
4.0AA Large
4.1AA Large
1.8Fail
1.7Fail
Black BG
1.3Fail
5.2AA
5.1AA
11.7AAA
12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

202024
767677
75757D
C4C3C1
C9C8B3

Deuteranopia

202123
747278
74727D
C4C5C0
C9CAB4

Tritanopia

222222
6B7A7B
6C7E7E
C7C0C0
CCB7B8

Achromatopsia

202020
7B7B7B
7A7A7A
C2C2C2
C4C4C4

Shades & Tints Shades & Tints

#221D26

Dark
Light

#6A8572

Dark
Light

#6B827B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #221d26;
  --color-2: #6a8572;
  --color-3: #6b827b;
  --color-4: #c7bfc1;
  --color-5: #ccc4ad;
}

SCSS

$color-1: #221d26;
$color-2: #6a8572;
$color-3: #6b827b;
$color-4: #c7bfc1;
$color-5: #ccc4ad;

TAILWIND

colors: {
  'brand-1': '#221d26',
  'brand-2': '#6a8572',
  'brand-3': '#6b827b',
  'brand-4': '#c7bfc1',
  'brand-5': '#ccc4ad',
}

RGB Array

[34, 29, 38], [106, 133, 114], [107, 130, 123], [199, 191, 193], [204, 196, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #221D26, #6A8572, #6B827B, #C7BFC1, #CCC4AD is ideal for: brand design, premium product pages, magazine layouts, 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: #221d26; --color-2: #6a8572; --color-3: #6b827b; --color-4: #c7bfc1; --color-5: #ccc4ad. 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. 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