← Back to Editor

#212422 · #4DFAF1 · #81EFD3 · #B4E5B5 · #E8DA97

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

#212422

Ink Black · Black · Dark Stone

HEX
#212422
RGB
rgb(33, 36, 34)
HSL
hsl(140, 4%, 14%)
HSB
hsb(140, 8%, 14%)
CMYK
cmyk(8%, 0%, 6%, 86%)
Oklch
oklch(25.6% 0.006 156.8)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

#4DFAF1

Jade · Turquoise · Lake Green

HEX
#4DFAF1
RGB
rgb(77, 250, 241)
HSL
hsl(177, 95%, 64%)
HSB
hsb(177, 69%, 98%)
CMYK
cmyk(69%, 0%, 4%, 2%)
Oklch
oklch(89.7% 0.138 189.9)

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

#81EFD3

Jade · SkyBlue · Lake Green

HEX
#81EFD3
RGB
rgb(129, 239, 211)
HSL
hsl(165, 77%, 72%)
HSB
hsb(165, 46%, 94%)
CMYK
cmyk(46%, 0%, 12%, 6%)
Oklch
oklch(87.9% 0.110 175.1)

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

#B4E5B5

Celadon · Silver · Apple Green

HEX
#B4E5B5
RGB
rgb(180, 229, 181)
HSL
hsl(121, 49%, 80%)
HSB
hsb(121, 21%, 90%)
CMYK
cmyk(21%, 0%, 21%, 10%)
Oklch
oklch(87.5% 0.083 145.3)

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

#E8DA97

Fresh Green · Khaki · Sunflower

HEX
#E8DA97
RGB
rgb(232, 218, 151)
HSL
hsl(50, 64%, 75%)
HSB
hsb(50, 35%, 91%)
CMYK
cmyk(0%, 6%, 35%, 9%)
Oklch
oklch(88.4% 0.087 97.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

212422
252224

Analogous

232522
212422
222525

Triadic

212422
232225
252322

Split-Comp.

212422
252225
252223

Tetradic

212422
222325
252224
252522

Contrast Matrix WCAG 2.1 Contrast

212422
4DFAF1
81EFD3
B4E5B5
E8DA97
—
12.1
AAA
11.4
AAA
11.1
AAA
11.1
AAA
12.1
AAA
—
1.1
Fail
1.1
Fail
1.1
Fail
11.4
AAA
1.1
Fail
—
1.0
Fail
1.0
Fail
11.1
AAA
1.1
Fail
1.0
Fail
—
1.0
Fail
11.1
AAA
1.1
Fail
1.0
Fail
1.0
Fail
—
White BG
15.7AAA
1.3Fail
1.4Fail
1.4Fail
1.4Fail
Black BG
1.3Fail
16.3AAA
15.2AAA
14.8AAA
14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

222222
9899F3
B1B2DA
C9CAC1
E2E2A7

Deuteranopia

222223
8E81F4
AAA2DB
C6C3C3
E3E4AB

Tritanopia

212323
56F5F5
87DFE0
B6CACC
E7B4B7

Achromatopsia

232323
C5C5C5
CBCBCB
D1D1D1
D7D7D7

Shades & Tints Shades & Tints

#212422

Dark
Light

#4DFAF1

Dark
Light

#81EFD3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #212422;
  --color-2: #4dfaf1;
  --color-3: #81efd3;
  --color-4: #b4e5b5;
  --color-5: #e8da97;
}

SCSS

$color-1: #212422;
$color-2: #4dfaf1;
$color-3: #81efd3;
$color-4: #b4e5b5;
$color-5: #e8da97;

TAILWIND

colors: {
  'brand-1': '#212422',
  'brand-2': '#4dfaf1',
  'brand-3': '#81efd3',
  'brand-4': '#b4e5b5',
  'brand-5': '#e8da97',
}

RGB Array

[33, 36, 34], [77, 250, 241], [129, 239, 211], [180, 229, 181], [232, 218, 151]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #212422, #4DFAF1, #81EFD3, #B4E5B5, #E8DA97 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: #212422; --color-2: #4dfaf1; --color-3: #81efd3; --color-4: #b4e5b5; --color-5: #e8da97. 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