#8EBF60 + #A8D86C + #A5AF62 + #CDD661 + #D8E079 · summer - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8EBF60

Celadon · DarkSeaGreen · Olive Green

HEX

#8EBF60

RGB

rgb(142, 191, 96)

HSL

hsl(91, 43%, 56%)

HSB

hsb(91, 50%, 75%)

CMYK

cmyk(26%, 0%, 50%, 25%)

Oklch

oklch(74.9% 0.136 131.4)

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

#A8D86C

Willow Green · LightGreen · Apple Green

HEX

#A8D86C

RGB

rgb(168, 216, 108)

HSL

hsl(87, 58%, 64%)

HSB

hsb(87, 50%, 85%)

CMYK

cmyk(22%, 0%, 50%, 15%)

Oklch

oklch(82.5% 0.147 129.0)

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

#A5AF62

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A5AF62

RGB

rgb(165, 175, 98)

HSL

hsl(68, 32%, 54%)

HSB

hsb(68, 44%, 69%)

CMYK

cmyk(6%, 0%, 44%, 31%)

Oklch

oklch(72.9% 0.102 115.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#CDD661

Fresh Green · BurlyWood · Sunflower

HEX

#CDD661

RGB

rgb(205, 214, 97)

HSL

hsl(65, 59%, 61%)

HSB

hsb(65, 55%, 84%)

CMYK

cmyk(4%, 0%, 55%, 16%)

Oklch

oklch(84.6% 0.141 113.0)

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

#D8E079

Fresh Green · Khaki · Sunflower

HEX

#D8E079

RGB

rgb(216, 224, 121)

HSL

hsl(65, 62%, 68%)

HSB

hsb(65, 46%, 88%)

CMYK

cmyk(4%, 0%, 46%, 12%)

Oklch

oklch(87.9% 0.127 112.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8EBF60

905FBF

Analogous

BDBF5F

8EBF60

5FBF60

Triadic

8EBF60

5F8DBF

BF5F8D

Split-Comp.

8EBF60

605FBF

BF5FBD

Tetradic

8EBF60

5FBDBF

905FBF

BF605F

Contrast Matrix WCAG 2.1 Contrast

8EBF60	A8D86C	A5AF62	CDD661	D8E079
—	1.3 Fail	1.1 Fail	1.4 Fail	1.5 Fail
1.3 Fail	—	1.4 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.4 Fail	—	1.5 Fail	1.7 Fail
1.4 Fail	1.1 Fail	1.5 Fail	—	1.1 Fail
1.5 Fail	1.2 Fail	1.7 Fail	1.1 Fail	—

White BG

2.1Fail

1.7Fail

2.4Fail

1.6Fail

1.4Fail

Black BG

9.8AAA

12.7AAA

8.9AAA

13.4AAA

14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A477

BDBD86

A9A975

D1D17D

DBDC92

Deuteranopia

A09D7C

BAB68C

A9A879

D0D084

DBDA98

Tritanopia

90898D

AA9B9F

A68387

CD9499

D8A6AA

Achromatopsia

A6A6A6

BDBDBD

A3A3A3

C6C6C6

D2D2D2

Shades & Tints Shades & Tints

#8EBF60

Dark

Light

#A8D86C

Dark

Light

#A5AF62

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ebf60;
  --color-2: #a8d86c;
  --color-3: #a5af62;
  --color-4: #cdd661;
  --color-5: #d8e079;
}

SCSS

$color-1: #8ebf60;
$color-2: #a8d86c;
$color-3: #a5af62;
$color-4: #cdd661;
$color-5: #d8e079;

TAILWIND

colors: {
  'brand-1': '#8ebf60',
  'brand-2': '#a8d86c',
  'brand-3': '#a5af62',
  'brand-4': '#cdd661',
  'brand-5': '#d8e079',
}

RGB Array

[142, 191, 96], [168, 216, 108], [165, 175, 98], [205, 214, 97], [216, 224, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #8EBF60, #A8D86C, #A5AF62, #CDD661, #D8E079 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: #8ebf60; --color-2: #a8d86c; --color-3: #a5af62; --color-4: #cdd661; --color-5: #d8e079. 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 summer-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