← Back to Editor

#99CC66 · #7FB24C · #669933 · #336600 · #F2F5C1

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamic

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#99CC66

Celadon · DarkSeaGreen · Olive Green

HEX
#99CC66
RGB
rgb(153, 204, 102)
HSL
hsl(90, 50%, 60%)
HSB
hsb(90, 50%, 80%)
CMYK
cmyk(25%, 0%, 50%, 20%)
Oklch
oklch(78.7% 0.143 130.9)

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

#7FB24C

Celadon · DarkSeaGreen · Olive Green

HEX
#7FB24C
RGB
rgb(127, 178, 76)
HSL
hsl(90, 40%, 50%)
HSB
hsb(90, 57%, 70%)
CMYK
cmyk(29%, 0%, 57%, 30%)
Oklch
oklch(70.5% 0.144 131.4)

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

#669933

Celadon · DarkOliveGreen · Forest Green

HEX
#669933
RGB
rgb(102, 153, 51)
HSL
hsl(90, 50%, 40%)
HSB
hsb(90, 67%, 60%)
CMYK
cmyk(33%, 0%, 67%, 40%)
Oklch
oklch(62.5% 0.143 132.0)

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

#336600

Pine Green · DarkGreen · Dark Green

HEX
#336600
RGB
rgb(51, 102, 0)
HSL
hsl(90, 100%, 20%)
HSB
hsb(90, 100%, 40%)
CMYK
cmyk(50%, 0%, 100%, 60%)
Oklch
oklch(45.6% 0.133 134.8)

Traditional「Pine Green」· Paint「Dark Green」· Creative Blush Sunrise

#F2F5C1

Fresh Green · Bisque · Lemon Cream

HEX
#F2F5C1
RGB
rgb(242, 245, 193)
HSL
hsl(63, 72%, 86%)
HSB
hsb(63, 21%, 96%)
CMYK
cmyk(1%, 0%, 21%, 4%)
Oklch
oklch(95.5% 0.067 110.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99CC66
9966CC

Analogous

CCCC66
99CC66
66CC66

Triadic

99CC66
6699CC
CC6699

Split-Comp.

99CC66
6666CC
CC66CC

Tetradic

99CC66
66CCCC
9966CC
CC6666

Contrast Matrix WCAG 2.1 Contrast

99CC66
7FB24C
669933
336600
F2F5C1
—
1.3
Fail
1.8
Fail
3.7
AA Large
1.7
Fail
1.3
Fail
—
1.4
Fail
2.8
Fail
2.2
Fail
1.8
Fail
1.4
Fail
—
2.0
Fail
3.0
AA Large
3.7
AA Large
2.8
Fail
2.0
Fail
—
6.1
AA
1.7
Fail
2.2
Fail
3.0
AA Large
6.1
AA
—
White BG
1.9Fail
2.5Fail
3.4AA Large
6.9AA
1.1Fail
Black BG
11.2AAA
8.4AAA
6.2AA
3.0AA Large
18.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFB07F
959665
7C7D4C
494A19
F3F3CE

Deuteranopia

ACA885
928E6B
797552
46421F
F3F3D1

Tritanopia

9C9296
82787C
695F63
362C30
F2D8DA

Achromatopsia

B1B1B1
979797
7E7E7E
4B4B4B
EEEEEE

Shades & Tints Shades & Tints

#99CC66

Dark
Light

#7FB24C

Dark
Light

#669933

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99cc66;
  --color-2: #7fb24c;
  --color-3: #669933;
  --color-4: #336600;
  --color-5: #f2f5c1;
}

SCSS

$color-1: #99cc66;
$color-2: #7fb24c;
$color-3: #669933;
$color-4: #336600;
$color-5: #f2f5c1;

TAILWIND

colors: {
  'brand-1': '#99cc66',
  'brand-2': '#7fb24c',
  'brand-3': '#669933',
  'brand-4': '#336600',
  'brand-5': '#f2f5c1',
}

RGB Array

[153, 204, 102], [127, 178, 76], [102, 153, 51], [51, 102, 0], [242, 245, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #99CC66, #7FB24C, #669933, #336600, #F2F5C1 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: #99cc66; --color-2: #7fb24c; --color-3: #669933; --color-4: #336600; --color-5: #f2f5c1. 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