#CCFF00 + #BEE034 + #ADC25B + #97A172 + #76786E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CCFF00

Grass Green · Yellow · Olive Green

HEX

#CCFF00

RGB

rgb(204, 255, 0)

HSL

hsl(72, 100%, 50%)

HSB

hsb(72, 100%, 100%)

CMYK

cmyk(20%, 0%, 100%, 0%)

Oklch

oklch(93.1% 0.229 123.1)

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

#BEE034

Grass Green · GreenYellow · Olive Green

HEX

#BEE034

RGB

rgb(190, 224, 52)

HSL

hsl(72, 74%, 54%)

HSB

hsb(72, 77%, 88%)

CMYK

cmyk(15%, 0%, 77%, 12%)

Oklch

oklch(85.3% 0.189 120.7)

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

#ADC25B

Grass Green · DarkSeaGreen · Olive Green

HEX

#ADC25B

RGB

rgb(173, 194, 91)

HSL

hsl(72, 46%, 56%)

HSB

hsb(72, 53%, 76%)

CMYK

cmyk(11%, 0%, 53%, 24%)

Oklch

oklch(77.6% 0.131 119.1)

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

#97A172

Grass Green · DarkSeaGreen · Olive Green

HEX

#97A172

RGB

rgb(151, 161, 114)

HSL

hsl(73, 20%, 54%)

HSB

hsb(73, 29%, 63%)

CMYK

cmyk(6%, 0%, 29%, 37%)

Oklch

oklch(68.9% 0.066 117.9)

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

#76786E

Ink Gray · DimGray · Warm Gray

HEX

#76786E

RGB

rgb(118, 120, 110)

HSL

hsl(72, 4%, 45%)

HSB

hsb(72, 8%, 47%)

CMYK

cmyk(2%, 0%, 8%, 53%)

Oklch

oklch(56.8% 0.015 116.1)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCFF00

3300FF

Analogous

FFB300

CCFF00

4DFF00

Triadic

CCFF00

00CCFF

FF00CC

Split-Comp.

CCFF00

004CFF

B300FF

Tetradic

CCFF00

00FFB3

3300FF

FF004C

Contrast Matrix WCAG 2.1 Contrast

CCFF00	BEE034	ADC25B	97A172	76786E
—	1.3 Fail	1.7 Fail	2.3 Fail	3.8 AA Large
1.3 Fail	—	1.3 Fail	1.8 Fail	3.0 Fail
1.7 Fail	1.3 Fail	—	1.4 Fail	2.3 Fail
2.3 Fail	1.8 Fail	1.4 Fail	—	1.6 Fail
3.8 AA Large	3.0 Fail	2.3 Fail	1.6 Fail	—

White BG

1.2Fail

1.5Fail

2.0Fail

2.7Fail

4.5AA Large

Black BG

17.9AAA

13.9AAA

10.6AAA

7.7AAA

4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E33E

CDCD5E

B6B674

9B9B7D

777770

Deuteranopia

DFDB4D

CBC868

B5B37A

9B9A80

777771

Tritanopia

CF6E79

C07E86

AE888C

988688

767273

Achromatopsia

D3D3D3

C2C2C2

B0B0B0

999999

767676

Shades & Tints Shades & Tints

#CCFF00

Dark

Light

#BEE034

Dark

Light

#ADC25B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccff00;
  --color-2: #bee034;
  --color-3: #adc25b;
  --color-4: #97a172;
  --color-5: #76786e;
}

SCSS

$color-1: #ccff00;
$color-2: #bee034;
$color-3: #adc25b;
$color-4: #97a172;
$color-5: #76786e;

TAILWIND

colors: {
  'brand-1': '#ccff00',
  'brand-2': '#bee034',
  'brand-3': '#adc25b',
  'brand-4': '#97a172',
  'brand-5': '#76786e',
}

RGB Array

[204, 255, 0], [190, 224, 52], [173, 194, 91], [151, 161, 114], [118, 120, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCFF00, #BEE034, #ADC25B, #97A172, #76786E 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: #ccff00; --color-2: #bee034; --color-3: #adc25b; --color-4: #97a172; --color-5: #76786e. 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