#C4DD73 + #96DA8D + #8EC786 + #7FB178 + #647762 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C4DD73

Willow Green · BurlyWood · Apple Green

HEX

#C4DD73

RGB

rgb(196, 221, 115)

HSL

hsl(74, 61%, 66%)

HSB

hsb(74, 48%, 87%)

CMYK

cmyk(11%, 0%, 48%, 13%)

Oklch

oklch(85.6% 0.135 120.3)

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

#96DA8D

Emerald · LightGreen · Apple Green

HEX

#96DA8D

RGB

rgb(150, 218, 141)

HSL

hsl(113, 51%, 70%)

HSB

hsb(113, 35%, 85%)

CMYK

cmyk(31%, 0%, 35%, 15%)

Oklch

oklch(82.4% 0.126 141.6)

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

#8EC786

Celadon · DarkSeaGreen · Apple Green

HEX

#8EC786

RGB

rgb(142, 199, 134)

HSL

hsl(113, 37%, 65%)

HSB

hsb(113, 33%, 78%)

CMYK

cmyk(29%, 0%, 33%, 22%)

Oklch

oklch(77.4% 0.108 141.5)

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

#7FB178

Celadon · DarkSeaGreen · Olive Green

HEX

#7FB178

RGB

rgb(127, 177, 120)

HSL

hsl(113, 27%, 58%)

HSB

hsb(113, 32%, 69%)

CMYK

cmyk(28%, 0%, 32%, 31%)

Oklch

oklch(71.0% 0.097 141.5)

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

#647762

Celadon · DimGray · Olive Green

HEX

#647762

RGB

rgb(100, 119, 98)

HSL

hsl(114, 10%, 43%)

HSB

hsb(114, 18%, 47%)

CMYK

cmyk(16%, 0%, 18%, 53%)

Oklch

oklch(54.7% 0.039 142.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4DD73

8C73DD

Analogous

DDC173

C4DD73

90DD73

Triadic

C4DD73

73C5DD

DD73C5

Split-Comp.

C4DD73

7390DD

C173DD

Tetradic

C4DD73

73DDC1

8C73DD

DD7390

Contrast Matrix WCAG 2.1 Contrast

C4DD73	96DA8D	8EC786	7FB178	647762
—	1.1 Fail	1.3 Fail	1.6 Fail	3.2 AA Large
1.1 Fail	—	1.2 Fail	1.5 Fail	2.9 Fail
1.3 Fail	1.2 Fail	—	1.3 Fail	2.4 Fail
1.6 Fail	1.5 Fail	1.3 Fail	—	1.9 Fail
3.2 AA Large	2.9 Fail	2.4 Fail	1.9 Fail	—

White BG

1.5Fail

1.7Fail

2.0Fail

2.5Fail

4.8AA

Black BG

13.9AAA

12.7AAA

10.7AAA

8.5AAA

4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCF8D

B3B4A0

A7A796

959586

6C6C67

Deuteranopia

CDCC93

B0AAA4

A39F9A

928E89

6B6A68

Tritanopia

C5A1A5

99AEB2

91A2A5

829193

656B6C

Achromatopsia

C9C9C9

BDBDBD

AFAFAF

9C9C9C

6F6F6F

Shades & Tints Shades & Tints

#C4DD73

Dark

Light

#96DA8D

Dark

Light

#8EC786

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4dd73;
  --color-2: #96da8d;
  --color-3: #8ec786;
  --color-4: #7fb178;
  --color-5: #647762;
}

SCSS

$color-1: #c4dd73;
$color-2: #96da8d;
$color-3: #8ec786;
$color-4: #7fb178;
$color-5: #647762;

TAILWIND

colors: {
  'brand-1': '#c4dd73',
  'brand-2': '#96da8d',
  'brand-3': '#8ec786',
  'brand-4': '#7fb178',
  'brand-5': '#647762',
}

RGB Array

[196, 221, 115], [150, 218, 141], [142, 199, 134], [127, 177, 120], [100, 119, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4DD73, #96DA8D, #8EC786, #7FB178, #647762 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: #c4dd73; --color-2: #96da8d; --color-3: #8ec786; --color-4: #7fb178; --color-5: #647762. 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