← Back to Editor

#8A9136 · #564C23 · #A4806A · #AA6E70 · #8A3924

bright

A 5-color bright palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8A9136

Autumn Sage · Olive · Honey Gold

HEX
#8A9136
RGB
rgb(138, 145, 54)
HSL
hsl(65, 46%, 39%)
HSB
hsb(65, 63%, 57%)
CMYK
cmyk(5%, 0%, 63%, 43%)
Oklch
oklch(63.2% 0.115 113.4)

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

#564C23

Ochre · DarkOliveGreen · Amber Gold

HEX
#564C23
RGB
rgb(86, 76, 35)
HSL
hsl(48, 42%, 24%)
HSB
hsb(48, 59%, 34%)
CMYK
cmyk(0%, 12%, 59%, 66%)
Oklch
oklch(41.7% 0.060 95.9)

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

#A4806A

Tangerine · Gray · Warm Sun

HEX
#A4806A
RGB
rgb(164, 128, 106)
HSL
hsl(23, 24%, 53%)
HSB
hsb(23, 35%, 64%)
CMYK
cmyk(0%, 22%, 35%, 36%)
Oklch
oklch(62.9% 0.055 52.9)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#AA6E70

Crimson · Gray · Passion Red

HEX
#AA6E70
RGB
rgb(170, 110, 112)
HSL
hsl(358, 26%, 55%)
HSB
hsb(358, 35%, 67%)
CMYK
cmyk(0%, 35%, 34%, 33%)
Oklch
oklch(60.2% 0.077 17.4)

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

#8A3924

Crimson · Brown · Wine Red

HEX
#8A3924
RGB
rgb(138, 57, 36)
HSL
hsl(12, 59%, 34%)
HSB
hsb(12, 74%, 54%)
CMYK
cmyk(0%, 59%, 74%, 46%)
Oklch
oklch(45.2% 0.116 35.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8A9136
3D3691

Analogous

916B36
8A9136
5C9136

Triadic

8A9136
368A91
91368A

Split-Comp.

8A9136
365C91
6B3691

Tetradic

8A9136
36916B
3D3691
91365C

Contrast Matrix WCAG 2.1 Contrast

8A9136
564C23
A4806A
AA6E70
8A3924
—
2.5
Fail
1.1
Fail
1.2
Fail
2.3
Fail
2.5
Fail
—
2.4
Fail
2.1
Fail
1.1
Fail
1.1
Fail
2.4
Fail
—
1.1
Fail
2.2
Fail
1.2
Fail
2.1
Fail
1.1
Fail
—
1.9
Fail
2.3
Fail
1.1
Fail
2.2
Fail
1.9
Fail
—
White BG
3.4AA Large
8.6AAA
3.6AA Large
4.1AA Large
7.8AAA
Black BG
6.2AA
2.5Fail
5.9AA
5.2AA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8D4C
52522D
94946F
908F70
676629

Deuteranopia

8D8C51
52532F
979971
94986F
6C722A

Tritanopia

8A5D61
563536
A27474
A76F6F
862D2E

Achromatopsia

858585
4A4A4A
888888
808080
4F4F4F

Shades & Tints Shades & Tints

#8A9136

Dark
Light

#564C23

Dark
Light

#A4806A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8a9136;
  --color-2: #564c23;
  --color-3: #a4806a;
  --color-4: #aa6e70;
  --color-5: #8a3924;
}

SCSS

$color-1: #8a9136;
$color-2: #564c23;
$color-3: #a4806a;
$color-4: #aa6e70;
$color-5: #8a3924;

TAILWIND

colors: {
  'brand-1': '#8a9136',
  'brand-2': '#564c23',
  'brand-3': '#a4806a',
  'brand-4': '#aa6e70',
  'brand-5': '#8a3924',
}

RGB Array

[138, 145, 54], [86, 76, 35], [164, 128, 106], [170, 110, 112], [138, 57, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #8A9136, #564C23, #A4806A, #AA6E70, #8A3924 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: #8a9136; --color-2: #564c23; --color-3: #a4806a; --color-4: #aa6e70; --color-5: #8a3924. 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 bright-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