← Back to Editor

#5B6E4E · #89A388 · #404728 · #C2A28B · #0D2223

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

#5B6E4E

Celadon · DimGray · Forest Green

HEX
#5B6E4E
RGB
rgb(91, 110, 78)
HSL
hsl(96, 17%, 37%)
HSB
hsb(96, 29%, 43%)
CMYK
cmyk(17%, 0%, 29%, 57%)
Oklch
oklch(51.4% 0.054 133.0)

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

#89A388

Celadon · DarkSeaGreen · Olive Green

HEX
#89A388
RGB
rgb(137, 163, 136)
HSL
hsl(118, 13%, 59%)
HSB
hsb(118, 17%, 64%)
CMYK
cmyk(16%, 0%, 17%, 36%)
Oklch
oklch(68.8% 0.049 144.1)

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

#404728

Grass Green · DarkOliveGreen · Forest Green

HEX
#404728
RGB
rgb(64, 71, 40)
HSL
hsl(74, 28%, 22%)
HSB
hsb(74, 44%, 28%)
CMYK
cmyk(10%, 0%, 44%, 72%)
Oklch
oklch(38.3% 0.050 119.2)

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

#C2A28B

Apricot · Tan · Warm Sun

HEX
#C2A28B
RGB
rgb(194, 162, 139)
HSL
hsl(25, 31%, 65%)
HSB
hsb(25, 28%, 76%)
CMYK
cmyk(0%, 16%, 28%, 24%)
Oklch
oklch(73.5% 0.050 57.6)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#0D2223

Slate Blue · Black · Peacock Green

HEX
#0D2223
RGB
rgb(13, 34, 35)
HSL
hsl(183, 46%, 9%)
HSB
hsb(183, 63%, 14%)
CMYK
cmyk(63%, 3%, 0%, 86%)
Oklch
oklch(23.5% 0.027 199.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B6E4E
624E6E

Analogous

6B6E4E
5B6E4E
4E6E52

Triadic

5B6E4E
4E5B6E
6E4E5B

Split-Comp.

5B6E4E
524E6E
6E4E6B

Tetradic

5B6E4E
4E6B6E
624E6E
6E524E

Contrast Matrix WCAG 2.1 Contrast

5B6E4E
89A388
404728
C2A28B
0D2223
—
2.0
Fail
1.8
Fail
2.3
Fail
3.0
Fail
2.0
Fail
—
3.6
AA Large
1.2
Fail
6.0
AA
1.8
Fail
3.6
AA Large
—
4.1
AA Large
1.7
Fail
2.3
Fail
1.2
Fail
4.1
AA Large
—
7.0
AA
3.0
Fail
6.0
AA
1.7
Fail
7.0
AA
—
White BG
5.5AA
2.7Fail
9.8AAA
2.4Fail
16.5AAA
Black BG
3.8AA Large
7.7AAA
2.1Fail
8.8AAA
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

636356
94948F
434330
B4B491
161623

Deuteranopia

626158
939190
434231
B6B892
151323

Tritanopia

5C5C5D
8A9495
403537
C09596
0E2323

Achromatopsia

656565
989898
414141
A9A9A9
1C1C1C

Shades & Tints Shades & Tints

#5B6E4E

Dark
Light

#89A388

Dark
Light

#404728

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b6e4e;
  --color-2: #89a388;
  --color-3: #404728;
  --color-4: #c2a28b;
  --color-5: #0d2223;
}

SCSS

$color-1: #5b6e4e;
$color-2: #89a388;
$color-3: #404728;
$color-4: #c2a28b;
$color-5: #0d2223;

TAILWIND

colors: {
  'brand-1': '#5b6e4e',
  'brand-2': '#89a388',
  'brand-3': '#404728',
  'brand-4': '#c2a28b',
  'brand-5': '#0d2223',
}

RGB Array

[91, 110, 78], [137, 163, 136], [64, 71, 40], [194, 162, 139], [13, 34, 35]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5B6E4E, #89A388, #404728, #C2A28B, #0D2223 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: #5b6e4e; --color-2: #89a388; --color-3: #404728; --color-4: #c2a28b; --color-5: #0d2223. 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