#CCFF33 + #99D866 + #66B299 + #668C80 + #666666 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CCFF33

Grass Green · GreenYellow · Olive Green

HEX

#CCFF33

RGB

rgb(204, 255, 51)

HSL

hsl(75, 100%, 60%)

HSB

hsb(75, 80%, 100%)

CMYK

cmyk(20%, 0%, 80%, 0%)

Oklch

oklch(93.2% 0.218 123.6)

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

#99D866

Emerald · LightGreen · Apple Green

HEX

#99D866

RGB

rgb(153, 216, 102)

HSL

hsl(93, 59%, 62%)

HSB

hsb(93, 53%, 85%)

CMYK

cmyk(29%, 0%, 53%, 15%)

Oklch

oklch(81.5% 0.160 132.9)

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

#66B299

Mineral Blue · CadetBlue · Lake Green

HEX

#66B299

RGB

rgb(102, 178, 153)

HSL

hsl(160, 33%, 55%)

HSB

hsb(160, 43%, 70%)

CMYK

cmyk(43%, 0%, 14%, 30%)

Oklch

oklch(70.7% 0.085 170.6)

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

#668C80

Mineral Blue · SlateGray · Mint Ice

HEX

#668C80

RGB

rgb(102, 140, 128)

HSL

hsl(161, 16%, 47%)

HSB

hsb(161, 27%, 55%)

CMYK

cmyk(27%, 0%, 9%, 45%)

Oklch

oklch(60.8% 0.046 173.2)

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

#666666

Ink Gray · DimGray · Charcoal

HEX

#666666

RGB

rgb(102, 102, 102)

HSL

hsl(0, 0%, 40%)

HSB

hsb(0, 0%, 40%)

CMYK

cmyk(0%, 0%, 0%, 60%)

Oklch

oklch(51.0% 0.000 89.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCFF33

6633FF

Analogous

FFCC33

CCFF33

66FF33

Triadic

CCFF33

33CCFF

FF33CC

Split-Comp.

CCFF33

3366FF

CC33FF

Tetradic

CCFF33

33FFCC

6633FF

FF3366

Contrast Matrix WCAG 2.1 Contrast

CCFF33	99D866	66B299	668C80	666666
—	1.4 Fail	2.1 Fail	3.2 AA Large	4.9 AA
1.4 Fail	—	1.5 Fail	2.2 Fail	3.4 AA Large
2.1 Fail	1.5 Fail	—	1.5 Fail	2.3 Fail
3.2 AA Large	2.2 Fail	1.5 Fail	—	1.5 Fail
4.9 AA	3.4 AA Large	2.3 Fail	1.5 Fail	—

White BG

1.2Fail

1.7Fail

2.5Fail

3.7AA Large

5.7AA

Black BG

17.9AAA

12.4AAA

8.4AAA

5.6AA

3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E364

B4B582

87889F

767783

666666

Deuteranopia

DFDB70

B1AC88

837DA1

747184

666666

Tritanopia

CF8B94

9C979C

6AA4A5

688586

666666

Achromatopsia

D8D8D8

B8B8B8

989898

7F7F7F

666666

Shades & Tints Shades & Tints

#CCFF33

Dark

Light

#99D866

Dark

Light

#66B299

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccff33;
  --color-2: #99d866;
  --color-3: #66b299;
  --color-4: #668c80;
  --color-5: #666666;
}

SCSS

$color-1: #ccff33;
$color-2: #99d866;
$color-3: #66b299;
$color-4: #668c80;
$color-5: #666666;

TAILWIND

colors: {
  'brand-1': '#ccff33',
  'brand-2': '#99d866',
  'brand-3': '#66b299',
  'brand-4': '#668c80',
  'brand-5': '#666666',
}

RGB Array

[204, 255, 51], [153, 216, 102], [102, 178, 153], [102, 140, 128], [102, 102, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCFF33, #99D866, #66B299, #668C80, #666666 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ccff33; --color-2: #99d866; --color-3: #66b299; --color-4: #668c80; --color-5: #666666. 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 general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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