← Back to Editor

#22D3A4 · #1E8469 · #1B4A3E · #358671 · #7EBDAD

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

#22D3A4

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#22D3A4
RGB
rgb(34, 211, 164)
HSL
hsl(164, 72%, 48%)
HSB
hsb(164, 84%, 83%)
CMYK
cmyk(84%, 0%, 22%, 17%)
Oklch
oklch(77.3% 0.150 168.7)

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

#1E8469

Mineral Blue · SeaGreen · Mint Ice

HEX
#1E8469
RGB
rgb(30, 132, 105)
HSL
hsl(164, 63%, 32%)
HSB
hsb(164, 77%, 52%)
CMYK
cmyk(77%, 0%, 20%, 48%)
Oklch
oklch(55.0% 0.100 170.4)

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

#1B4A3E

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#1B4A3E
RGB
rgb(27, 74, 62)
HSL
hsl(165, 47%, 20%)
HSB
hsb(165, 64%, 29%)
CMYK
cmyk(64%, 0%, 16%, 71%)
Oklch
oklch(37.3% 0.055 173.7)

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

#358671

Mineral Blue · SeaGreen · Mint Ice

HEX
#358671
RGB
rgb(53, 134, 113)
HSL
hsl(164, 43%, 37%)
HSB
hsb(164, 60%, 53%)
CMYK
cmyk(60%, 0%, 16%, 47%)
Oklch
oklch(56.4% 0.086 173.2)

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

#7EBDAD

Jade · MediumAquaMarine · Lake Green

HEX
#7EBDAD
RGB
rgb(126, 189, 173)
HSL
hsl(165, 32%, 62%)
HSB
hsb(165, 33%, 74%)
CMYK
cmyk(33%, 0%, 8%, 26%)
Oklch
oklch(75.1% 0.069 176.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

22D3A4
D32251

Analogous

22D34B
22D3A4
22A9D3

Triadic

22D3A4
A422D3
D3A422

Split-Comp.

22D3A4
D322A9
D34B22

Tetradic

22D3A4
4B22D3
D32251
A9D322

Contrast Matrix WCAG 2.1 Contrast

22D3A4
1E8469
1B4A3E
358671
7EBDAD
—
2.4
Fail
5.2
AA
2.3
Fail
1.1
Fail
2.4
Fail
—
2.2
Fail
1.1
Fail
2.1
Fail
5.2
AA
2.2
Fail
—
2.3
Fail
4.7
AA
2.3
Fail
1.1
Fail
2.3
Fail
—
2.0
Fail
1.1
Fail
2.1
Fail
4.7
AA
2.0
Fail
—
White BG
1.9Fail
4.6AA
10.0AAA
4.4AA Large
2.1Fail
Black BG
10.9AAA
4.6AA
2.1Fail
4.8AA
9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F70AF
4A4B70
2F3041
585976
999AB1

Deuteranopia

6457B2
443D71
2D2942
534D77
9691B2

Tritanopia

2BB8BA
237576
1D4344
397A7B
81B4B5

Achromatopsia

999999
626262
3B3B3B
6B6B6B
A8A8A8

Shades & Tints Shades & Tints

#22D3A4

Dark
Light

#1E8469

Dark
Light

#1B4A3E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #22d3a4;
  --color-2: #1e8469;
  --color-3: #1b4a3e;
  --color-4: #358671;
  --color-5: #7ebdad;
}

SCSS

$color-1: #22d3a4;
$color-2: #1e8469;
$color-3: #1b4a3e;
$color-4: #358671;
$color-5: #7ebdad;

TAILWIND

colors: {
  'brand-1': '#22d3a4',
  'brand-2': '#1e8469',
  'brand-3': '#1b4a3e',
  'brand-4': '#358671',
  'brand-5': '#7ebdad',
}

RGB Array

[34, 211, 164], [30, 132, 105], [27, 74, 62], [53, 134, 113], [126, 189, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #22D3A4, #1E8469, #1B4A3E, #358671, #7EBDAD is ideal for: tech websites, dark mode UIs, game UIs, 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: #22d3a4; --color-2: #1e8469; --color-3: #1b4a3e; --color-4: #358671; --color-5: #7ebdad. 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 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