← Back to Editor

#152526 · #6A7371 · #A5A69C · #F2E1C2 · #D9C8B4

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

#152526

Slate Blue · Black · Peacock Green

HEX
#152526
RGB
rgb(21, 37, 38)
HSL
hsl(184, 29%, 12%)
HSB
hsb(184, 45%, 15%)
CMYK
cmyk(45%, 3%, 0%, 85%)
Oklch
oklch(25.1% 0.022 200.9)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#6A7371

Ink Gray · DimGray · Warm Gray

HEX
#6A7371
RGB
rgb(106, 115, 113)
HSL
hsl(167, 4%, 43%)
HSB
hsb(167, 8%, 45%)
CMYK
cmyk(8%, 0%, 2%, 55%)
Oklch
oklch(54.7% 0.011 181.1)

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

#A5A69C

Ash · DarkGray · Silver Sand

HEX
#A5A69C
RGB
rgb(165, 166, 156)
HSL
hsl(66, 5%, 63%)
HSB
hsb(66, 6%, 65%)
CMYK
cmyk(1%, 0%, 6%, 35%)
Oklch
oklch(72.1% 0.014 111.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#F2E1C2

Goose Yellow · Bisque · Peach Orange

HEX
#F2E1C2
RGB
rgb(242, 225, 194)
HSL
hsl(39, 65%, 85%)
HSB
hsb(39, 20%, 95%)
CMYK
cmyk(0%, 7%, 20%, 5%)
Oklch
oklch(91.5% 0.045 82.6)

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

#D9C8B4

Goose Yellow · Silver · Peach Orange

HEX
#D9C8B4
RGB
rgb(217, 200, 180)
HSL
hsl(32, 33%, 78%)
HSB
hsb(32, 17%, 85%)
CMYK
cmyk(0%, 8%, 17%, 15%)
Oklch
oklch(84.1% 0.033 71.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

152526
271716

Analogous

162720
152526
161D27

Triadic

152526
271626
262716

Split-Comp.

152526
27161D
272016

Tetradic

152526
201627
271716
1D2716

Contrast Matrix WCAG 2.1 Contrast

152526
6A7371
A5A69C
F2E1C2
D9C8B4
—
3.2
AA Large
6.4
AA
12.3
AAA
9.7
AAA
3.2
AA Large
—
2.0
Fail
3.8
AA Large
3.0
Fail
6.4
AA
2.0
Fail
—
1.9
Fail
1.5
Fail
12.3
AAA
3.8
AA Large
1.9
Fail
—
1.3
Fail
9.7
AAA
3.0
Fail
1.5
Fail
1.3
Fail
—
White BG
15.9AAA
4.9AA
2.5Fail
1.3Fail
1.6Fail
Black BG
1.3Fail
4.3AA Large
8.5AAA
16.3AAA
12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1C1C26
6E6E71
A5A59E
EBEACA
D2D1B9

Deuteranopia

1B1A26
6D6D72
A5A59F
ECEDCB
D3D4BA

Tritanopia

162626
6A7272
A5A0A1
F1CFD1
D8BDBE

Achromatopsia

202020
707070
A5A5A5
E3E3E3
CBCBCB

Shades & Tints Shades & Tints

#152526

Dark
Light

#6A7371

Dark
Light

#A5A69C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #152526;
  --color-2: #6a7371;
  --color-3: #a5a69c;
  --color-4: #f2e1c2;
  --color-5: #d9c8b4;
}

SCSS

$color-1: #152526;
$color-2: #6a7371;
$color-3: #a5a69c;
$color-4: #f2e1c2;
$color-5: #d9c8b4;

TAILWIND

colors: {
  'brand-1': '#152526',
  'brand-2': '#6a7371',
  'brand-3': '#a5a69c',
  'brand-4': '#f2e1c2',
  'brand-5': '#d9c8b4',
}

RGB Array

[21, 37, 38], [106, 115, 113], [165, 166, 156], [242, 225, 194], [217, 200, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #152526, #6A7371, #A5A69C, #F2E1C2, #D9C8B4 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: #152526; --color-2: #6a7371; --color-3: #a5a69c; --color-4: #f2e1c2; --color-5: #d9c8b4. 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