← Back to Editor

#A7D1CC · #5DA39A · #388076 · #0D594F · #002E28

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

#A7D1CC

Jade · LightSteelBlue · Lake Green

HEX
#A7D1CC
RGB
rgb(167, 209, 204)
HSL
hsl(173, 31%, 74%)
HSB
hsb(173, 20%, 82%)
CMYK
cmyk(20%, 0%, 2%, 18%)
Oklch
oklch(82.9% 0.045 187.4)

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

#5DA39A

Mineral Blue · CadetBlue · Mint Ice

HEX
#5DA39A
RGB
rgb(93, 163, 154)
HSL
hsl(172, 28%, 50%)
HSB
hsb(172, 43%, 64%)
CMYK
cmyk(43%, 0%, 6%, 36%)
Oklch
oklch(66.7% 0.072 185.1)

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

#388076

Mineral Blue · SeaGreen · Mint Ice

HEX
#388076
RGB
rgb(56, 128, 118)
HSL
hsl(172, 39%, 36%)
HSB
hsb(172, 56%, 50%)
CMYK
cmyk(56%, 0%, 8%, 50%)
Oklch
oklch(55.1% 0.074 183.2)

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

#0D594F

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#0D594F
RGB
rgb(13, 89, 79)
HSL
hsl(172, 75%, 20%)
HSB
hsb(172, 85%, 35%)
CMYK
cmyk(85%, 0%, 11%, 65%)
Oklch
oklch(41.8% 0.071 181.4)

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

#002E28

Mineral Blue · Black · Peacock Green

HEX
#002E28
RGB
rgb(0, 46, 40)
HSL
hsl(172, 100%, 9%)
HSB
hsb(172, 100%, 18%)
CMYK
cmyk(100%, 0%, 13%, 82%)
Oklch
oklch(27.0% 0.049 181.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7D1CC
D1A8AD

Analogous

A8D1B8
A7D1CC
A8C1D1

Triadic

A7D1CC
CCA8D1
D1CCA8

Split-Comp.

A7D1CC
D1A8C1
D1B8A8

Tetradic

A7D1CC
B8A8D1
D1A8AD
C1D1A8

Contrast Matrix WCAG 2.1 Contrast

A7D1CC
5DA39A
388076
0D594F
002E28
—
1.8
Fail
2.8
Fail
4.9
AA
8.9
AAA
1.8
Fail
—
1.6
Fail
2.8
Fail
5.0
AA
2.8
Fail
1.6
Fail
—
1.8
Fail
3.2
AA Large
4.9
AA
2.8
Fail
1.8
Fail
—
1.8
Fail
8.9
AAA
5.0
AA
3.2
AA Large
1.8
Fail
—
White BG
1.7Fail
2.9Fail
4.6AA
8.2AAA
14.8AAA
Black BG
12.6AAA
7.2AAA
4.5AA
2.6Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9BACD
7B7C9C
575878
2E2F51
141429

Deuteranopia

B7B4CD
77729D
534E79
2A2452
110E2A

Tritanopia

A9CECE
619E9E
3C7A7B
115354
022B2B

Achromatopsia

C4C4C4
8D8D8D
696969
414141
202020

Shades & Tints Shades & Tints

#A7D1CC

Dark
Light

#5DA39A

Dark
Light

#388076

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7d1cc;
  --color-2: #5da39a;
  --color-3: #388076;
  --color-4: #0d594f;
  --color-5: #002e28;
}

SCSS

$color-1: #a7d1cc;
$color-2: #5da39a;
$color-3: #388076;
$color-4: #0d594f;
$color-5: #002e28;

TAILWIND

colors: {
  'brand-1': '#a7d1cc',
  'brand-2': '#5da39a',
  'brand-3': '#388076',
  'brand-4': '#0d594f',
  'brand-5': '#002e28',
}

RGB Array

[167, 209, 204], [93, 163, 154], [56, 128, 118], [13, 89, 79], [0, 46, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A7D1CC, #5DA39A, #388076, #0D594F, #002E28 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: #a7d1cc; --color-2: #5da39a; --color-3: #388076; --color-4: #0d594f; --color-5: #002e28. 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