#3C5515 + #4B6C15 + #60881F + #719831 + #89AA54 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3C5515

Grass Green · DarkOliveGreen · Forest Green

HEX

#3C5515

RGB

rgb(60, 85, 21)

HSL

hsl(83, 60%, 21%)

HSB

hsb(83, 75%, 33%)

CMYK

cmyk(29%, 0%, 75%, 67%)

Oklch

oklch(41.5% 0.094 128.5)

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

#4B6C15

Grass Green · DarkOliveGreen · Forest Green

HEX

#4B6C15

RGB

rgb(75, 108, 21)

HSL

hsl(83, 67%, 25%)

HSB

hsb(83, 81%, 42%)

CMYK

cmyk(31%, 0%, 81%, 58%)

Oklch

oklch(48.8% 0.118 128.7)

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

#60881F

Grass Green · DarkOliveGreen · Forest Green

HEX

#60881F

RGB

rgb(96, 136, 31)

HSL

hsl(83, 63%, 33%)

HSB

hsb(83, 77%, 53%)

CMYK

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

Oklch

oklch(57.7% 0.138 128.7)

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

#719831

Grass Green · DarkOliveGreen · Forest Green

HEX

#719831

RGB

rgb(113, 152, 49)

HSL

hsl(83, 51%, 39%)

HSB

hsb(83, 68%, 60%)

CMYK

cmyk(26%, 0%, 68%, 40%)

Oklch

oklch(63.0% 0.138 127.8)

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

#89AA54

Grass Green · Gray · Olive Green

HEX

#89AA54

RGB

rgb(137, 170, 84)

HSL

hsl(83, 34%, 50%)

HSB

hsb(83, 51%, 67%)

CMYK

cmyk(19%, 0%, 51%, 33%)

Oklch

oklch(69.4% 0.120 126.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C5515

2E1556

Analogous

564E15

3C5515

1D5615

Triadic

3C5515

153D56

56153D

Split-Comp.

3C5515

151D56

4E1556

Tetradic

3C5515

15564E

2E1556

56151D

Contrast Matrix WCAG 2.1 Contrast

3C5515	4B6C15	60881F	719831	89AA54
—	1.4 Fail	2.0 Fail	2.5 Fail	3.2 AA Large
1.4 Fail	—	1.5 Fail	1.8 Fail	2.3 Fail
2.0 Fail	1.5 Fail	—	1.2 Fail	1.6 Fail
2.5 Fail	1.8 Fail	1.2 Fail	—	1.3 Fail
3.2 AA Large	2.3 Fail	1.6 Fail	1.3 Fail	—

White BG

8.4AAA

6.1AA

4.2AA Large

3.4AA Large

2.6Fail

Black BG

2.5Fail

3.5AA Large

5.0AA

6.2AA

7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

474724

595A2A

717238

82824A

979869

Deuteranopia

454428

57552F

6F6C3F

807D50

95936E

Tritanopia

3D3133

4D3B3E

624C51

735E62

8B797D

Achromatopsia

464646

585858

707070

818181

969696

Shades & Tints Shades & Tints

#3C5515

Dark

Light

#4B6C15

Dark

Light

#60881F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c5515;
  --color-2: #4b6c15;
  --color-3: #60881f;
  --color-4: #719831;
  --color-5: #89aa54;
}

SCSS

$color-1: #3c5515;
$color-2: #4b6c15;
$color-3: #60881f;
$color-4: #719831;
$color-5: #89aa54;

TAILWIND

colors: {
  'brand-1': '#3c5515',
  'brand-2': '#4b6c15',
  'brand-3': '#60881f',
  'brand-4': '#719831',
  'brand-5': '#89aa54',
}

RGB Array

[60, 85, 21], [75, 108, 21], [96, 136, 31], [113, 152, 49], [137, 170, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C5515, #4B6C15, #60881F, #719831, #89AA54 is ideal for: tech websites, dark mode UIs, game UIs. 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: #3c5515; --color-2: #4b6c15; --color-3: #60881f; --color-4: #719831; --color-5: #89aa54. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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