← Back to Editor

#322B38 · #4B4D6E · #5C8D94 · #68BD84 · #B8F07D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#322B38

Dark Plum · DarkSlateGray · Dark Purple

HEX
#322B38
RGB
rgb(50, 43, 56)
HSL
hsl(272, 13%, 19%)
HSB
hsb(272, 23%, 22%)
CMYK
cmyk(11%, 23%, 0%, 78%)
Oklch
oklch(30.2% 0.025 309.2)

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

#4B4D6E

Indigo · DarkSlateBlue · Prussian Blue

HEX
#4B4D6E
RGB
rgb(75, 77, 110)
HSL
hsl(237, 19%, 36%)
HSB
hsb(237, 32%, 43%)
CMYK
cmyk(32%, 30%, 0%, 57%)
Oklch
oklch(43.2% 0.054 281.2)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#5C8D94

Slate Blue · CadetBlue · Mint Ice

HEX
#5C8D94
RGB
rgb(92, 141, 148)
HSL
hsl(188, 23%, 47%)
HSB
hsb(188, 38%, 58%)
CMYK
cmyk(38%, 5%, 0%, 42%)
Oklch
oklch(61.1% 0.054 207.2)

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

#68BD84

Celadon · DarkSeaGreen · Olive Green

HEX
#68BD84
RGB
rgb(104, 189, 132)
HSL
hsl(140, 39%, 57%)
HSB
hsb(140, 45%, 74%)
CMYK
cmyk(45%, 0%, 30%, 26%)
Oklch
oklch(72.9% 0.118 153.2)

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

#B8F07D

Willow Green · LightGreen · Apple Green

HEX
#B8F07D
RGB
rgb(184, 240, 125)
HSL
hsl(89, 79%, 72%)
HSB
hsb(89, 48%, 94%)
CMYK
cmyk(23%, 0%, 48%, 6%)
Oklch
oklch(89.2% 0.156 130.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

322B38
30372A

Analogous

2B2A37
322B38
372A36

Triadic

322B38
37312A
2A3731

Split-Comp.

322B38
36372A
2A372B

Tetradic

322B38
372B2A
30372A
2A3637

Contrast Matrix WCAG 2.1 Contrast

322B38
4B4D6E
5C8D94
68BD84
B8F07D
—
1.7
Fail
3.7
AA Large
6.0
AA
10.3
AAA
1.7
Fail
—
2.2
Fail
3.6
AA Large
6.1
AA
3.7
AA Large
2.2
Fail
—
1.6
Fail
2.8
Fail
6.0
AA
3.6
AA Large
1.6
Fail
—
1.7
Fail
10.3
AAA
6.1
AA
2.8
Fail
1.7
Fail
—
White BG
13.7AAA
8.1AAA
3.7AA Large
2.3Fail
1.3Fail
Black BG
1.5Fail
2.6Fail
5.7AA
9.2AAA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F35
4C4C66
717292
8D8E92
D0D199

Deuteranopia

2F3034
4C4C64
6E6B92
888295
CDC9A0

Tritanopia

323232
4B605E
5E9191
6C9D9F
BBAFB4

Achromatopsia

2F2F2F
505050
7F7F7F
9D9D9D
D2D2D2

Shades & Tints Shades & Tints

#322B38

Dark
Light

#4B4D6E

Dark
Light

#5C8D94

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #322b38;
  --color-2: #4b4d6e;
  --color-3: #5c8d94;
  --color-4: #68bd84;
  --color-5: #b8f07d;
}

SCSS

$color-1: #322b38;
$color-2: #4b4d6e;
$color-3: #5c8d94;
$color-4: #68bd84;
$color-5: #b8f07d;

TAILWIND

colors: {
  'brand-1': '#322b38',
  'brand-2': '#4b4d6e',
  'brand-3': '#5c8d94',
  'brand-4': '#68bd84',
  'brand-5': '#b8f07d',
}

RGB Array

[50, 43, 56], [75, 77, 110], [92, 141, 148], [104, 189, 132], [184, 240, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #322B38, #4B4D6E, #5C8D94, #68BD84, #B8F07D 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: #322b38; --color-2: #4b4d6e; --color-3: #5c8d94; --color-4: #68bd84; --color-5: #b8f07d. 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