#D3F060 + #A4CA5E + #878F78 + #80788F + #624596 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D3F060

Willow Green · Khaki · Apple Green

HEX

#D3F060

RGB

rgb(211, 240, 96)

HSL

hsl(72, 83%, 66%)

HSB

hsb(72, 60%, 94%)

CMYK

cmyk(12%, 0%, 60%, 6%)

Oklch

oklch(90.7% 0.171 119.6)

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

#A4CA5E

Grass Green · DarkSeaGreen · Olive Green

HEX

#A4CA5E

RGB

rgb(164, 202, 94)

HSL

hsl(81, 50%, 58%)

HSB

hsb(81, 53%, 79%)

CMYK

cmyk(19%, 0%, 53%, 21%)

Oklch

oklch(78.8% 0.143 125.6)

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

#878F78

Grass Green · Gray · Warm Gray

HEX

#878F78

RGB

rgb(135, 143, 120)

HSL

hsl(81, 9%, 52%)

HSB

hsb(81, 16%, 56%)

CMYK

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

Oklch

oklch(63.7% 0.035 123.0)

Traditional「Grass Green」· Paint「Warm Gray」· Creative Urban Concrete

#80788F

Deep Indigo · Gray · Warm Gray

HEX

#80788F

RGB

rgb(128, 120, 143)

HSL

hsl(261, 9%, 52%)

HSB

hsb(261, 16%, 56%)

CMYK

cmyk(10%, 16%, 0%, 44%)

Oklch

oklch(58.8% 0.036 301.2)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

#624596

Deep Indigo · DarkSlateBlue · Violet

HEX

#624596

RGB

rgb(98, 69, 150)

HSL

hsl(261, 37%, 43%)

HSB

hsb(261, 54%, 59%)

CMYK

cmyk(35%, 54%, 0%, 41%)

Oklch

oklch(46.2% 0.128 297.7)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3F060

7D60F0

Analogous

F0C560

D3F060

8CF060

Triadic

D3F060

60D3F0

F060D3

Split-Comp.

D3F060

608CF0

C560F0

Tetradic

D3F060

60F0C5

7D60F0

F0608C

Contrast Matrix WCAG 2.1 Contrast

D3F060	A4CA5E	878F78	80788F	624596
—	1.5 Fail	2.6 Fail	3.3 AA Large	5.8 AA
1.5 Fail	—	1.8 Fail	2.2 Fail	4.0 AA Large
2.6 Fail	1.8 Fail	—	1.2 Fail	2.2 Fail
3.3 AA Large	2.2 Fail	1.2 Fail	—	1.8 Fail
5.8 AA	4.0 AA Large	2.2 Fail	1.8 Fail	—

White BG

1.3Fail

1.9Fail

3.4AA Large

4.2AA Large

7.5AAA

Black BG

16.4AAA

11.2AAA

6.2AA

5.0AA

2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E083

B4B578

8A8B7E

7D7C89

555582

Deuteranopia

DEDC8B

B2AF7E

8A897F

7D7E88

57597E

Tritanopia

D49EA4

A68D91

878283

808584

617370

Achromatopsia

D7D7D7

B2B2B2

8A8A8A

7D7D7D

575757

Shades & Tints Shades & Tints

#D3F060

Dark

Light

#A4CA5E

Dark

Light

#878F78

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3f060;
  --color-2: #a4ca5e;
  --color-3: #878f78;
  --color-4: #80788f;
  --color-5: #624596;
}

SCSS

$color-1: #d3f060;
$color-2: #a4ca5e;
$color-3: #878f78;
$color-4: #80788f;
$color-5: #624596;

TAILWIND

colors: {
  'brand-1': '#d3f060',
  'brand-2': '#a4ca5e',
  'brand-3': '#878f78',
  'brand-4': '#80788f',
  'brand-5': '#624596',
}

RGB Array

[211, 240, 96], [164, 202, 94], [135, 143, 120], [128, 120, 143], [98, 69, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D3F060, #A4CA5E, #878F78, #80788F, #624596 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: #d3f060; --color-2: #a4ca5e; --color-3: #878f78; --color-4: #80788f; --color-5: #624596. 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