← Back to Editor

#9DC9AC · #CCF32C · #E4E3A6 · #4ECCB4 · #037F88

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#9DC9AC

Celadon · DarkGray · Apple Green

HEX
#9DC9AC
RGB
rgb(157, 201, 172)
HSL
hsl(140, 29%, 70%)
HSB
hsb(140, 22%, 79%)
CMYK
cmyk(22%, 0%, 14%, 21%)
Oklch
oklch(79.6% 0.062 155.9)

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

#CCF32C

Grass Green · GreenYellow · Olive Green

HEX
#CCF32C
RGB
rgb(204, 243, 44)
HSL
hsl(72, 89%, 56%)
HSB
hsb(72, 82%, 95%)
CMYK
cmyk(16%, 0%, 82%, 5%)
Oklch
oklch(90.5% 0.207 121.1)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#E4E3A6

Fresh Green · Wheat · Lemon Cream

HEX
#E4E3A6
RGB
rgb(228, 227, 166)
HSL
hsl(59, 53%, 77%)
HSB
hsb(59, 27%, 89%)
CMYK
cmyk(0%, 0%, 27%, 11%)
Oklch
oklch(90.2% 0.079 107.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#4ECCB4

Mineral Blue · MediumTurquoise · Lake Green

HEX
#4ECCB4
RGB
rgb(78, 204, 180)
HSL
hsl(169, 55%, 55%)
HSB
hsb(169, 62%, 80%)
CMYK
cmyk(62%, 0%, 12%, 20%)
Oklch
oklch(76.9% 0.116 178.1)

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

#037F88

Lake Blue · Teal · Mint Ice

HEX
#037F88
RGB
rgb(3, 127, 136)
HSL
hsl(184, 96%, 27%)
HSB
hsb(184, 98%, 53%)
CMYK
cmyk(98%, 7%, 0%, 47%)
Oklch
oklch(54.4% 0.092 203.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DC9AC
C99CBA

Analogous

A4C99C
9DC9AC
9CC9C1

Triadic

9DC9AC
AB9CC9
C9AB9C

Split-Comp.

9DC9AC
C19CC9
C99CA4

Tetradic

9DC9AC
9CA4C9
C99CBA
C9C19C

Contrast Matrix WCAG 2.1 Contrast

9DC9AC
CCF32C
E4E3A6
4ECCB4
037F88
—
1.4
Fail
1.4
Fail
1.1
Fail
2.6
Fail
1.4
Fail
—
1.0
Fail
1.5
Fail
3.7
AA Large
1.4
Fail
1.0
Fail
—
1.5
Fail
3.6
AA Large
1.1
Fail
1.5
Fail
1.5
Fail
—
2.4
Fail
2.6
Fail
3.7
AA Large
3.6
AA Large
2.4
Fail
—
White BG
1.8Fail
1.3Fail
1.3Fail
2.0Fail
4.8AA
Black BG
11.4AAA
16.4AAA
15.8AAA
10.6AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B0B0B3
DDDD5C
E4E4B5
8586BA
393A86

Deuteranopia

AEAAB5
DBD868
E4E4B8
7D74BB
322885

Tritanopia

9FB9BA
CE828B
E4C0C3
54BEBF
098484

Achromatopsia

B9B9B9
D1D1D1
DCDCDC
A4A4A4
5B5B5B

Shades & Tints Shades & Tints

#9DC9AC

Dark
Light

#CCF32C

Dark
Light

#E4E3A6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9dc9ac;
  --color-2: #ccf32c;
  --color-3: #e4e3a6;
  --color-4: #4eccb4;
  --color-5: #037f88;
}

SCSS

$color-1: #9dc9ac;
$color-2: #ccf32c;
$color-3: #e4e3a6;
$color-4: #4eccb4;
$color-5: #037f88;

TAILWIND

colors: {
  'brand-1': '#9dc9ac',
  'brand-2': '#ccf32c',
  'brand-3': '#e4e3a6',
  'brand-4': '#4eccb4',
  'brand-5': '#037f88',
}

RGB Array

[157, 201, 172], [204, 243, 44], [228, 227, 166], [78, 204, 180], [3, 127, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9DC9AC, #CCF32C, #E4E3A6, #4ECCB4, #037F88 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: #9dc9ac; --color-2: #ccf32c; --color-3: #e4e3a6; --color-4: #4eccb4; --color-5: #037f88. 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