#87C728 + #A1920B + #944A25 + #66352E + #302B2B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#87C728

Grass Green · GreenYellow · Olive Green

HEX

#87C728

RGB

rgb(135, 199, 40)

HSL

hsl(84, 67%, 47%)

HSB

hsb(84, 80%, 78%)

CMYK

cmyk(32%, 0%, 80%, 22%)

Oklch

oklch(75.8% 0.191 130.0)

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

#A1920B

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#A1920B

RGB

rgb(161, 146, 11)

HSL

hsl(54, 87%, 34%)

HSB

hsb(54, 93%, 63%)

CMYK

cmyk(0%, 9%, 93%, 37%)

Oklch

oklch(65.3% 0.134 102.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#944A25

Tangerine · Sienna · Amber Brown

HEX

#944A25

RGB

rgb(148, 74, 37)

HSL

hsl(20, 60%, 36%)

HSB

hsb(20, 75%, 58%)

CMYK

cmyk(0%, 50%, 75%, 42%)

Oklch

oklch(49.4% 0.111 45.3)

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

#66352E

Crimson · DarkOliveGreen · Wine Red

HEX

#66352E

RGB

rgb(102, 53, 46)

HSL

hsl(8, 38%, 29%)

HSB

hsb(8, 55%, 40%)

CMYK

cmyk(0%, 48%, 55%, 60%)

Oklch

oklch(39.0% 0.072 29.3)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#302B2B

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#302B2B

RGB

rgb(48, 43, 43)

HSL

hsl(0, 5%, 18%)

HSB

hsb(0, 10%, 19%)

CMYK

cmyk(0%, 10%, 10%, 81%)

Oklch

oklch(29.4% 0.007 17.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87C728

6828C8

Analogous

C8B828

87C728

38C828

Triadic

87C728

2888C8

C82888

Split-Comp.

87C728

2838C8

B828C8

Tetradic

87C728

28C8B8

6828C8

C82838

Contrast Matrix WCAG 2.1 Contrast

87C728	A1920B	944A25	66352E	302B2B
—	1.5 Fail	3.1 AA Large	4.8 AA	6.8 AA
1.5 Fail	—	2.0 Fail	3.1 AA Large	4.4 AA Large
3.1 AA Large	2.0 Fail	—	1.5 Fail	2.2 Fail
4.8 AA	3.1 AA Large	1.5 Fail	—	1.4 Fail
6.8 AA	4.4 AA Large	2.2 Fail	1.4 Fail	—

White BG

2.1Fail

3.2AA Large

6.4AA

9.9AAA

13.9AAA

Black BG

10.2AAA

6.6AA

3.3AA Large

2.1Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A34E

9B9A2C

74732E

515030

2E2E2B

Deuteranopia

9F9A58

9B9D34

787E30

545730

2E2E2B

Tritanopia

8A6D74

A0454B

903537

643131

302B2B

Achromatopsia

A2A2A2

878787

5C5C5C

434343

2C2C2C

Shades & Tints Shades & Tints

#87C728

Dark

Light

#A1920B

Dark

Light

#944A25

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87c728;
  --color-2: #a1920b;
  --color-3: #944a25;
  --color-4: #66352e;
  --color-5: #302b2b;
}

SCSS

$color-1: #87c728;
$color-2: #a1920b;
$color-3: #944a25;
$color-4: #66352e;
$color-5: #302b2b;

TAILWIND

colors: {
  'brand-1': '#87c728',
  'brand-2': '#a1920b',
  'brand-3': '#944a25',
  'brand-4': '#66352e',
  'brand-5': '#302b2b',
}

RGB Array

[135, 199, 40], [161, 146, 11], [148, 74, 37], [102, 53, 46], [48, 43, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87C728, #A1920B, #944A25, #66352E, #302B2B 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: #87c728; --color-2: #a1920b; --color-3: #944a25; --color-4: #66352e; --color-5: #302b2b. 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