#76BA76 + #72A156 + #788843 + #78682A + #65461E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#76BA76

Celadon · DarkSeaGreen · Olive Green

HEX

#76BA76

RGB

rgb(118, 186, 118)

HSL

hsl(120, 33%, 60%)

HSB

hsb(120, 37%, 73%)

CMYK

cmyk(37%, 0%, 37%, 27%)

Oklch

oklch(72.6% 0.119 144.2)

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

#72A156

Celadon · Gray · Olive Green

HEX

#72A156

RGB

rgb(114, 161, 86)

HSL

hsl(98, 30%, 48%)

HSB

hsb(98, 47%, 63%)

CMYK

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

Oklch

oklch(65.7% 0.116 134.8)

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

#788843

Grass Green · DarkOliveGreen · Forest Green

HEX

#788843

RGB

rgb(120, 136, 67)

HSL

hsl(74, 34%, 40%)

HSB

hsb(74, 51%, 53%)

CMYK

cmyk(12%, 0%, 51%, 47%)

Oklch

oklch(59.8% 0.096 120.2)

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

#78682A

Ochre · DarkOliveGreen · Honey Gold

HEX

#78682A

RGB

rgb(120, 104, 42)

HSL

hsl(48, 48%, 32%)

HSB

hsb(48, 65%, 47%)

CMYK

cmyk(0%, 13%, 65%, 53%)

Oklch

oklch(51.9% 0.084 94.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#65461E

Ochre · DarkOliveGreen · Amber Brown

HEX

#65461E

RGB

rgb(101, 70, 30)

HSL

hsl(34, 54%, 26%)

HSB

hsb(34, 70%, 40%)

CMYK

cmyk(0%, 31%, 70%, 60%)

Oklch

oklch(42.0% 0.070 70.7)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

76BA76

BB77BB

Analogous

99BB77

76BA76

77BB99

Triadic

76BA76

7777BB

BB7777

Split-Comp.

76BA76

9977BB

BB7799

Tetradic

76BA76

7799BB

BB77BB

BB9977

Contrast Matrix WCAG 2.1 Contrast

76BA76	72A156	788843	78682A	65461E
—	1.3 Fail	1.7 Fail	2.4 Fail	3.7 AA Large
1.3 Fail	—	1.3 Fail	1.8 Fail	2.8 Fail
1.7 Fail	1.3 Fail	—	1.4 Fail	2.2 Fail
2.4 Fail	1.8 Fail	1.4 Fail	—	1.6 Fail
3.7 AA Large	2.8 Fail	2.2 Fail	1.6 Fail	—

White BG

2.3Fail

3.0AA Large

3.9AA Large

5.5AA

8.6AAA

Black BG

9.1AAA

6.9AA

5.4AA

3.8AA Large

2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

939486

868768

7F7F54

717139

585728

Deuteranopia

908A8A

84806D

7E7D58

72733D

595C2A

Tritanopia

799396

74767A

796164

774547

632F31

Achromatopsia

9E9E9E

8A8A8A

7B7B7B

666666

4B4B4B

Shades & Tints Shades & Tints

#76BA76

Dark

Light

#72A156

Dark

Light

#788843

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #76ba76;
  --color-2: #72a156;
  --color-3: #788843;
  --color-4: #78682a;
  --color-5: #65461e;
}

SCSS

$color-1: #76ba76;
$color-2: #72a156;
$color-3: #788843;
$color-4: #78682a;
$color-5: #65461e;

TAILWIND

colors: {
  'brand-1': '#76ba76',
  'brand-2': '#72a156',
  'brand-3': '#788843',
  'brand-4': '#78682a',
  'brand-5': '#65461e',
}

RGB Array

[118, 186, 118], [114, 161, 86], [120, 136, 67], [120, 104, 42], [101, 70, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #76BA76, #72A156, #788843, #78682A, #65461E 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: #76ba76; --color-2: #72a156; --color-3: #788843; --color-4: #78682a; --color-5: #65461e. 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