← Back to Editor

#9CFC8B · #7AEB9C · #50DEA3 · #33CC9E · #086366

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

#9CFC8B

Emerald · LightGreen · Apple Green

HEX
#9CFC8B
RGB
rgb(156, 252, 139)
HSL
hsl(111, 95%, 77%)
HSB
hsb(111, 45%, 99%)
CMYK
cmyk(38%, 0%, 45%, 1%)
Oklch
oklch(90.6% 0.174 140.7)

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

#7AEB9C

Emerald · LightGreen · Apple Green

HEX
#7AEB9C
RGB
rgb(122, 235, 156)
HSL
hsl(138, 74%, 70%)
HSB
hsb(138, 48%, 92%)
CMYK
cmyk(48%, 0%, 34%, 8%)
Oklch
oklch(85.3% 0.152 151.7)

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

#50DEA3

Mineral Blue · MediumAquaMarine · Olive Green

HEX
#50DEA3
RGB
rgb(80, 222, 163)
HSL
hsl(155, 68%, 59%)
HSB
hsb(155, 64%, 87%)
CMYK
cmyk(64%, 0%, 27%, 13%)
Oklch
oklch(80.9% 0.149 162.1)

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

#33CC9E

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#33CC9E
RGB
rgb(51, 204, 158)
HSL
hsl(162, 60%, 50%)
HSB
hsb(162, 75%, 80%)
CMYK
cmyk(75%, 0%, 23%, 20%)
Oklch
oklch(75.6% 0.141 167.6)

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

#086366

Lake Blue · Teal · Peacock Green

HEX
#086366
RGB
rgb(8, 99, 102)
HSL
hsl(182, 85%, 22%)
HSB
hsb(182, 92%, 40%)
CMYK
cmyk(92%, 3%, 0%, 60%)
Oklch
oklch(45.5% 0.075 198.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9CFC8B
EB8DFC

Analogous

D5FC8D
9CFC8B
8DFCB4

Triadic

9CFC8B
8D9DFC
FC8D9D

Split-Comp.

9CFC8B
B48DFC
FC8DD5

Tetradic

9CFC8B
8DD5FC
EB8DFC
FCB48D

Contrast Matrix WCAG 2.1 Contrast

9CFC8B
7AEB9C
50DEA3
33CC9E
086366
—
1.2
Fail
1.4
Fail
1.6
Fail
5.6
AA
1.2
Fail
—
1.2
Fail
1.4
Fail
4.8
AA
1.4
Fail
1.2
Fail
—
1.2
Fail
4.1
AA Large
1.6
Fail
1.4
Fail
1.2
Fail
—
3.4
AA Large
5.6
AA
4.8
AA
4.1
AA Large
3.4
AA Large
—
White BG
1.3Fail
1.5Fail
1.7Fail
2.0Fail
7.0AAA
Black BG
16.7AAA
14.2AAA
12.3AAA
10.3AAA
3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C6A6
ABACAF
8D8FB1
7577A9
2F3065

Deuteranopia

C0B9AD
A49CB4
857BB5
6C61AC
2A2365

Tritanopia

A1BCC1
80BEC2
57BDBF
3BB2B4
0D6565

Achromatopsia

D2D2D2
C0C0C0
ADADAD
999999
484848

Shades & Tints Shades & Tints

#9CFC8B

Dark
Light

#7AEB9C

Dark
Light

#50DEA3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9cfc8b;
  --color-2: #7aeb9c;
  --color-3: #50dea3;
  --color-4: #33cc9e;
  --color-5: #086366;
}

SCSS

$color-1: #9cfc8b;
$color-2: #7aeb9c;
$color-3: #50dea3;
$color-4: #33cc9e;
$color-5: #086366;

TAILWIND

colors: {
  'brand-1': '#9cfc8b',
  'brand-2': '#7aeb9c',
  'brand-3': '#50dea3',
  'brand-4': '#33cc9e',
  'brand-5': '#086366',
}

RGB Array

[156, 252, 139], [122, 235, 156], [80, 222, 163], [51, 204, 158], [8, 99, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9CFC8B, #7AEB9C, #50DEA3, #33CC9E, #086366 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: #9cfc8b; --color-2: #7aeb9c; --color-3: #50dea3; --color-4: #33cc9e; --color-5: #086366. 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