← Back to Editor

#221E1A · #5A4235 · #88A16E · #416157 · #A0C2B8

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#221E1A

Ochre · Black · Cinnamon

HEX
#221E1A
RGB
rgb(34, 30, 26)
HSL
hsl(30, 13%, 12%)
HSB
hsb(30, 24%, 13%)
CMYK
cmyk(0%, 12%, 24%, 87%)
Oklch
oklch(23.8% 0.010 67.3)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#5A4235

Tangerine · DarkOliveGreen · Amber Brown

HEX
#5A4235
RGB
rgb(90, 66, 53)
HSL
hsl(21, 26%, 28%)
HSB
hsb(21, 41%, 35%)
CMYK
cmyk(0%, 27%, 41%, 65%)
Oklch
oklch(40.2% 0.040 49.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#88A16E

Grass Green · Gray · Olive Green

HEX
#88A16E
RGB
rgb(136, 161, 110)
HSL
hsl(89, 21%, 53%)
HSB
hsb(89, 32%, 63%)
CMYK
cmyk(16%, 0%, 32%, 37%)
Oklch
oklch(67.7% 0.077 129.5)

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

#416157

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#416157
RGB
rgb(65, 97, 87)
HSL
hsl(161, 20%, 32%)
HSB
hsb(161, 33%, 38%)
CMYK
cmyk(33%, 0%, 10%, 62%)
Oklch
oklch(46.4% 0.041 173.0)

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

#A0C2B8

Jade · DarkGray · Lake Green

HEX
#A0C2B8
RGB
rgb(160, 194, 184)
HSL
hsl(162, 22%, 69%)
HSB
hsb(162, 18%, 76%)
CMYK
cmyk(18%, 0%, 5%, 24%)
Oklch
oklch(78.6% 0.039 175.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

221E1A
1B1F23

Analogous

231B1B
221E1A
23231B

Triadic

221E1A
1B231F
1F1B23

Split-Comp.

221E1A
1B2323
1B1B23

Tetradic

221E1A
1B231B
1B1F23
231B23

Contrast Matrix WCAG 2.1 Contrast

221E1A
5A4235
88A16E
416157
A0C2B8
—
1.8
Fail
5.8
AA
2.4
Fail
8.6
AAA
1.8
Fail
—
3.3
AA Large
1.4
Fail
4.8
AA
5.8
AA
3.3
AA Large
—
2.4
Fail
1.5
Fail
2.4
Fail
1.4
Fail
2.4
Fail
—
3.5
AA Large
8.6
AAA
4.8
AA
1.5
Fail
3.5
AA Large
—
White BG
16.6AAA
9.3AAA
2.8Fail
6.8AA
1.9Fail
Black BG
1.3Fail
2.3Fail
7.4AAA
3.1AA Large
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

20201B
504F38
93937A
4F4F59
AFAFBA

Deuteranopia

21211B
515339
91907D
4D4B5A
ADAABB

Tritanopia

221C1C
593B3B
898486
435B5C
A2BCBD

Achromatopsia

1F1F1F
484848
949494
565656
B7B7B7

Shades & Tints Shades & Tints

#221E1A

Dark
Light

#5A4235

Dark
Light

#88A16E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #221e1a;
  --color-2: #5a4235;
  --color-3: #88a16e;
  --color-4: #416157;
  --color-5: #a0c2b8;
}

SCSS

$color-1: #221e1a;
$color-2: #5a4235;
$color-3: #88a16e;
$color-4: #416157;
$color-5: #a0c2b8;

TAILWIND

colors: {
  'brand-1': '#221e1a',
  'brand-2': '#5a4235',
  'brand-3': '#88a16e',
  'brand-4': '#416157',
  'brand-5': '#a0c2b8',
}

RGB Array

[34, 30, 26], [90, 66, 53], [136, 161, 110], [65, 97, 87], [160, 194, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #221E1A, #5A4235, #88A16E, #416157, #A0C2B8 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: #221e1a; --color-2: #5a4235; --color-3: #88a16e; --color-4: #416157; --color-5: #a0c2b8. 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