← Back to Editor

#9ECC14 · #7AC149 · #55B57D · #30A9B2 · #0B9DE6

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#9ECC14

Grass Green · GreenYellow · Olive Green

HEX
#9ECC14
RGB
rgb(158, 204, 20)
HSL
hsl(75, 82%, 44%)
HSB
hsb(75, 90%, 80%)
CMYK
cmyk(23%, 0%, 90%, 20%)
Oklch
oklch(78.4% 0.192 124.6)

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

#7AC149

Celadon · DarkSeaGreen · Olive Green

HEX
#7AC149
RGB
rgb(122, 193, 73)
HSL
hsl(96, 49%, 52%)
HSB
hsb(96, 62%, 76%)
CMYK
cmyk(37%, 0%, 62%, 24%)
Oklch
oklch(73.9% 0.169 134.6)

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

#55B57D

Celadon · MediumSeaGreen · Olive Green

HEX
#55B57D
RGB
rgb(85, 181, 125)
HSL
hsl(145, 39%, 52%)
HSB
hsb(145, 53%, 71%)
CMYK
cmyk(53%, 0%, 31%, 29%)
Oklch
oklch(70.0% 0.124 155.7)

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

#30A9B2

Lake Blue · LightSeaGreen · Mint Ice

HEX
#30A9B2
RGB
rgb(48, 169, 178)
HSL
hsl(184, 58%, 44%)
HSB
hsb(184, 73%, 70%)
CMYK
cmyk(73%, 5%, 0%, 30%)
Oklch
oklch(67.4% 0.103 202.4)

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

#0B9DE6

Lake Blue · DodgerBlue · Navy Blue

HEX
#0B9DE6
RGB
rgb(11, 157, 230)
HSL
hsl(200, 91%, 47%)
HSB
hsb(200, 95%, 90%)
CMYK
cmyk(95%, 32%, 0%, 10%)
Oklch
oklch(66.4% 0.151 240.4)

Traditional「Lake Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9ECC14
4214CC

Analogous

CC9E14
9ECC14
42CC14

Triadic

9ECC14
149ECC
CC149E

Split-Comp.

9ECC14
1442CC
9E14CC

Tetradic

9ECC14
14CC9E
4214CC
CC1442

Contrast Matrix WCAG 2.1 Contrast

9ECC14
7AC149
55B57D
30A9B2
0B9DE6
—
1.2
Fail
1.3
Fail
1.5
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.4
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
1.2
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.6
Fail
1.4
Fail
1.2
Fail
1.1
Fail
—
White BG
1.9Fail
2.2Fail
2.5Fail
2.8Fail
3.0AA Large
Black BG
11.1AAA
9.6AAA
8.3AAA
7.4AAA
7.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B241
999966
7F7F8B
6465B0
4A4CD4

Deuteranopia

AFAC4B
958F6D
79728E
5D54AF
4237D0

Tritanopia

A0646B
7E7D82
5A9598
36AEAE
12C6C3

Achromatopsia

A9A9A9
9E9E9E
929292
868686
7A7A7A

Shades & Tints Shades & Tints

#9ECC14

Dark
Light

#7AC149

Dark
Light

#55B57D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ecc14;
  --color-2: #7ac149;
  --color-3: #55b57d;
  --color-4: #30a9b2;
  --color-5: #0b9de6;
}

SCSS

$color-1: #9ecc14;
$color-2: #7ac149;
$color-3: #55b57d;
$color-4: #30a9b2;
$color-5: #0b9de6;

TAILWIND

colors: {
  'brand-1': '#9ecc14',
  'brand-2': '#7ac149',
  'brand-3': '#55b57d',
  'brand-4': '#30a9b2',
  'brand-5': '#0b9de6',
}

RGB Array

[158, 204, 20], [122, 193, 73], [85, 181, 125], [48, 169, 178], [11, 157, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #9ECC14, #7AC149, #55B57D, #30A9B2, #0B9DE6 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #9ecc14; --color-2: #7ac149; --color-3: #55b57d; --color-4: #30a9b2; --color-5: #0b9de6. 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. 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 earth-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