← Back to Editor

#CDF7E2 · #2BD991 · #04BA99 · #037E87 · #00161C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#CDF7E2

Jade · Lavender · Mint Green

HEX
#CDF7E2
RGB
rgb(205, 247, 226)
HSL
hsl(150, 72%, 89%)
HSB
hsb(150, 17%, 97%)
CMYK
cmyk(17%, 0%, 9%, 3%)
Oklch
oklch(94.1% 0.052 163.6)

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

#2BD991

Mineral Blue · LightSeaGreen · Olive Green

HEX
#2BD991
RGB
rgb(43, 217, 145)
HSL
hsl(155, 70%, 51%)
HSB
hsb(155, 80%, 85%)
CMYK
cmyk(80%, 0%, 33%, 15%)
Oklch
oklch(78.5% 0.170 159.4)

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

#04BA99

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#04BA99
RGB
rgb(4, 186, 153)
HSL
hsl(169, 96%, 37%)
HSB
hsb(169, 98%, 73%)
CMYK
cmyk(98%, 0%, 18%, 27%)
Oklch
oklch(70.4% 0.134 173.8)

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

#037E87

Lake Blue · Teal · Mint Ice

HEX
#037E87
RGB
rgb(3, 126, 135)
HSL
hsl(184, 96%, 27%)
HSB
hsb(184, 98%, 53%)
CMYK
cmyk(98%, 7%, 0%, 47%)
Oklch
oklch(54.1% 0.092 203.6)

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

#00161C

Lake Blue · Black · Peacock Green

HEX
#00161C
RGB
rgb(0, 22, 28)
HSL
hsl(193, 100%, 5%)
HSB
hsb(193, 100%, 11%)
CMYK
cmyk(100%, 21%, 0%, 89%)
Oklch
oklch(18.5% 0.033 216.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDF7E2
F7CFE3

Analogous

CFF7CF
CDF7E2
CFF7F7

Triadic

CDF7E2
E3CFF7
F7E3CF

Split-Comp.

CDF7E2
F7CFF7
F7CFCF

Tetradic

CDF7E2
CFCFF7
F7CFE3
F7F7CF

Contrast Matrix WCAG 2.1 Contrast

CDF7E2
2BD991
04BA99
037E87
00161C
—
1.6
Fail
2.1
Fail
4.1
AA Large
15.9
AAA
1.6
Fail
—
1.3
Fail
2.6
Fail
10.1
AAA
2.1
Fail
1.3
Fail
—
2.0
Fail
7.5
AAA
4.1
AA Large
2.6
Fail
2.0
Fail
—
3.8
AA Large
15.9
AAA
10.1
AAA
7.5
AAA
3.8
AA Large
—
White BG
1.2Fail
1.8Fail
2.5Fail
4.8AA
18.6AAA
Black BG
18.0AAA
11.4AAA
8.5AAA
4.3AA Large
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFE0E7
7678A2
5354A1
383985
0A0A1B

Deuteranopia

DDDAE8
6C5FA7
483BA3
312884
08071A

Tritanopia

CFEBEC
34B0B3
0DA7A9
098383
011919

Achromatopsia

E8E8E8
9D9D9D
808080
5A5A5A
101010

Shades & Tints Shades & Tints

#CDF7E2

Dark
Light

#2BD991

Dark
Light

#04BA99

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cdf7e2;
  --color-2: #2bd991;
  --color-3: #04ba99;
  --color-4: #037e87;
  --color-5: #00161c;
}

SCSS

$color-1: #cdf7e2;
$color-2: #2bd991;
$color-3: #04ba99;
$color-4: #037e87;
$color-5: #00161c;

TAILWIND

colors: {
  'brand-1': '#cdf7e2',
  'brand-2': '#2bd991',
  'brand-3': '#04ba99',
  'brand-4': '#037e87',
  'brand-5': '#00161c',
}

RGB Array

[205, 247, 226], [43, 217, 145], [4, 186, 153], [3, 126, 135], [0, 22, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDF7E2, #2BD991, #04BA99, #037E87, #00161C is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cdf7e2; --color-2: #2bd991; --color-3: #04ba99; --color-4: #037e87; --color-5: #00161c. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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