#CCEE61 + #A7C265 + #9CAC75 + #848F79 + #AAFF50 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CCEE61

Willow Green · Khaki · Apple Green

HEX

#CCEE61

RGB

rgb(204, 238, 97)

HSL

hsl(74, 81%, 66%)

HSB

hsb(74, 59%, 93%)

CMYK

cmyk(14%, 0%, 59%, 7%)

Oklch

oklch(89.7% 0.170 121.4)

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

#A7C265

Grass Green · DarkSeaGreen · Olive Green

HEX

#A7C265

RGB

rgb(167, 194, 101)

HSL

hsl(77, 43%, 58%)

HSB

hsb(77, 48%, 76%)

CMYK

cmyk(14%, 0%, 48%, 24%)

Oklch

oklch(77.3% 0.124 122.6)

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

#9CAC75

Grass Green · DarkSeaGreen · Olive Green

HEX

#9CAC75

RGB

rgb(156, 172, 117)

HSL

hsl(77, 25%, 57%)

HSB

hsb(77, 32%, 67%)

CMYK

cmyk(9%, 0%, 32%, 33%)

Oklch

oklch(71.8% 0.078 121.6)

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

#848F79

Celadon · Gray · Warm Gray

HEX

#848F79

RGB

rgb(132, 143, 121)

HSL

hsl(90, 9%, 52%)

HSB

hsb(90, 15%, 56%)

CMYK

cmyk(8%, 0%, 15%, 44%)

Oklch

oklch(63.5% 0.035 129.1)

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

#AAFF50

Willow Green · GreenYellow · Apple Green

HEX

#AAFF50

RGB

rgb(170, 255, 80)

HSL

hsl(89, 100%, 66%)

HSB

hsb(89, 69%, 100%)

CMYK

cmyk(33%, 0%, 69%, 0%)

Oklch

oklch(91.3% 0.219 131.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCEE61

8362EF

Analogous

EFC962

CCEE61

88EF62

Triadic

CCEE61

62CEEF

EF62CE

Split-Comp.

CCEE61

6288EF

C962EF

Tetradic

CCEE61

62EFC9

8362EF

EF6288

Contrast Matrix WCAG 2.1 Contrast

CCEE61	A7C265	9CAC75	848F79	AAFF50
—	1.5 Fail	1.9 Fail	2.6 Fail	1.1 Fail
1.5 Fail	—	1.2 Fail	1.7 Fail	1.6 Fail
1.9 Fail	1.2 Fail	—	1.4 Fail	2.0 Fail
2.6 Fail	1.7 Fail	1.4 Fail	—	2.8 Fail
1.1 Fail	1.6 Fail	2.0 Fail	2.8 Fail	—

White BG

1.3Fail

2.0Fail

2.4Fail

3.4AA Large

1.2Fail

Black BG

16.0AAA

10.5AAA

8.6AAA

6.2AA

17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDB83

B3B37C

A3A382

89897E

CFD07A

Deuteranopia

D9D68B

B1AF81

A2A186

888780

CAC485

Tritanopia

CE9EA4

A88D91

9D8D8F

858383

AE9CA3

Achromatopsia

D4D4D4

AFAFAF

A1A1A1

898989

D2D2D2

Shades & Tints Shades & Tints

#CCEE61

Dark

Light

#A7C265

Dark

Light

#9CAC75

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccee61;
  --color-2: #a7c265;
  --color-3: #9cac75;
  --color-4: #848f79;
  --color-5: #aaff50;
}

SCSS

$color-1: #ccee61;
$color-2: #a7c265;
$color-3: #9cac75;
$color-4: #848f79;
$color-5: #aaff50;

TAILWIND

colors: {
  'brand-1': '#ccee61',
  'brand-2': '#a7c265',
  'brand-3': '#9cac75',
  'brand-4': '#848f79',
  'brand-5': '#aaff50',
}

RGB Array

[204, 238, 97], [167, 194, 101], [156, 172, 117], [132, 143, 121], [170, 255, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCEE61, #A7C265, #9CAC75, #848F79, #AAFF50 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: #ccee61; --color-2: #a7c265; --color-3: #9cac75; --color-4: #848f79; --color-5: #aaff50. 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