← Back to Editor

#02160C · #4A7E74 · #B5DDD2 · #D9F0E5 · #37CAB3

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

#02160C

Mineral Blue · Black · Dark Green

HEX
#02160C
RGB
rgb(2, 22, 12)
HSL
hsl(150, 83%, 5%)
HSB
hsb(150, 91%, 9%)
CMYK
cmyk(91%, 0%, 45%, 91%)
Oklch
oklch(17.9% 0.035 160.8)

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

#4A7E74

Mineral Blue · DimGray · Mint Ice

HEX
#4A7E74
RGB
rgb(74, 126, 116)
HSL
hsl(168, 26%, 39%)
HSB
hsb(168, 41%, 49%)
CMYK
cmyk(41%, 0%, 8%, 51%)
Oklch
oklch(55.3% 0.058 180.4)

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

#B5DDD2

Jade · LightBlue · Glacier Blue

HEX
#B5DDD2
RGB
rgb(181, 221, 210)
HSL
hsl(163, 37%, 79%)
HSB
hsb(163, 18%, 87%)
CMYK
cmyk(18%, 0%, 5%, 13%)
Oklch
oklch(86.6% 0.045 176.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#D9F0E5

Jade · Lavender · Mint Green

HEX
#D9F0E5
RGB
rgb(217, 240, 229)
HSL
hsl(151, 43%, 90%)
HSB
hsb(151, 10%, 94%)
CMYK
cmyk(10%, 0%, 5%, 6%)
Oklch
oklch(93.5% 0.028 165.4)

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

#37CAB3

Mineral Blue · MediumTurquoise · Mint Ice

HEX
#37CAB3
RGB
rgb(55, 202, 179)
HSL
hsl(171, 58%, 50%)
HSB
hsb(171, 73%, 79%)
CMYK
cmyk(73%, 0%, 11%, 21%)
Oklch
oklch(75.8% 0.125 179.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

02160C
17020D

Analogous

021702
02160C
021717

Triadic

02160C
0D0217
170D02

Split-Comp.

02160C
170217
170202

Tetradic

02160C
020217
17020D
171702

Contrast Matrix WCAG 2.1 Contrast

02160C
4A7E74
B5DDD2
D9F0E5
37CAB3
—
4.0
AA Large
12.7
AAA
15.6
AAA
9.1
AAA
4.0
AA Large
—
3.1
AA Large
3.9
AA Large
2.3
Fail
12.7
AAA
3.1
AA Large
—
1.2
Fail
1.4
Fail
15.6
AAA
3.9
AA Large
1.2
Fail
—
1.7
Fail
9.1
AAA
2.3
Fail
1.4
Fail
1.7
Fail
—
White BG
18.7AAA
4.6AA
1.5Fail
1.2Fail
2.0Fail
Black BG
1.1Fail
4.5AA
14.2AAA
17.5AAA
10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0B0B0E
616176
C6C7D5
E3E3E8
7778B9

Deuteranopia

0A080F
5E5A77
C4C1D5
E2E0E8
6E63BA

Tritanopia

031011
4D7879
B7D7D7
DAEAEA
3EBDBE

Achromatopsia

0F0F0F
6D6D6D
D0D0D0
E8E8E8
9B9B9B

Shades & Tints Shades & Tints

#02160C

Dark
Light

#4A7E74

Dark
Light

#B5DDD2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #02160c;
  --color-2: #4a7e74;
  --color-3: #b5ddd2;
  --color-4: #d9f0e5;
  --color-5: #37cab3;
}

SCSS

$color-1: #02160c;
$color-2: #4a7e74;
$color-3: #b5ddd2;
$color-4: #d9f0e5;
$color-5: #37cab3;

TAILWIND

colors: {
  'brand-1': '#02160c',
  'brand-2': '#4a7e74',
  'brand-3': '#b5ddd2',
  'brand-4': '#d9f0e5',
  'brand-5': '#37cab3',
}

RGB Array

[2, 22, 12], [74, 126, 116], [181, 221, 210], [217, 240, 229], [55, 202, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #02160C, #4A7E74, #B5DDD2, #D9F0E5, #37CAB3 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: #02160c; --color-2: #4a7e74; --color-3: #b5ddd2; --color-4: #d9f0e5; --color-5: #37cab3. 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