← Back to Editor

#2A2704 · #5B4A1C · #77682F · #96A773 · #95B794

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2A2704

Autumn Sage · Black · Amber Gold

HEX
#2A2704
RGB
rgb(42, 39, 4)
HSL
hsl(55, 83%, 9%)
HSB
hsb(55, 90%, 16%)
CMYK
cmyk(0%, 7%, 90%, 84%)
Oklch
oklch(26.8% 0.052 104.5)

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

#5B4A1C

Ochre · DarkOliveGreen · Amber Gold

HEX
#5B4A1C
RGB
rgb(91, 74, 28)
HSL
hsl(44, 53%, 23%)
HSB
hsb(44, 69%, 36%)
CMYK
cmyk(0%, 19%, 69%, 64%)
Oklch
oklch(41.7% 0.067 88.8)

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

#77682F

Ochre · DarkOliveGreen · Honey Gold

HEX
#77682F
RGB
rgb(119, 104, 47)
HSL
hsl(48, 43%, 33%)
HSB
hsb(48, 61%, 47%)
CMYK
cmyk(0%, 13%, 61%, 53%)
Oklch
oklch(51.9% 0.079 94.8)

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

#96A773

Grass Green · DarkSeaGreen · Olive Green

HEX
#96A773
RGB
rgb(150, 167, 115)
HSL
hsl(80, 23%, 55%)
HSB
hsb(80, 31%, 65%)
CMYK
cmyk(10%, 0%, 31%, 35%)
Oklch
oklch(70.2% 0.075 123.0)

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

#95B794

Celadon · DarkSeaGreen · Apple Green

HEX
#95B794
RGB
rgb(149, 183, 148)
HSL
hsl(118, 20%, 65%)
HSB
hsb(118, 19%, 72%)
CMYK
cmyk(19%, 0%, 19%, 28%)
Oklch
oklch(74.5% 0.062 144.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A2704
04072A

Analogous

2A1404
2A2704
1A2A04

Triadic

2A2704
042A27
27042A

Split-Comp.

2A2704
041A2A
14042A

Tetradic

2A2704
042A14
04072A
2A041A

Contrast Matrix WCAG 2.1 Contrast

2A2704
5B4A1C
77682F
96A773
95B794
—
1.8
Fail
2.7
Fail
5.8
AA
6.8
AA
1.8
Fail
—
1.6
Fail
3.3
AA Large
3.9
AA Large
2.7
Fail
1.6
Fail
—
2.1
Fail
2.5
Fail
5.8
AA
3.3
AA Large
2.1
Fail
—
1.2
Fail
6.8
AA
3.9
AA Large
2.5
Fail
1.2
Fail
—
White BG
15.1AAA
8.6AAA
5.5AA
2.6Fail
2.2Fail
Black BG
1.4Fail
2.4Fail
3.8AA Large
8.1AAA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

29290C
545327
71703D
9D9E80
A4A49C

Deuteranopia

29290F
55562A
717340
9C9B83
A29F9F

Tritanopia

2A1315
5A3032
76484A
978A8C
97A3A5

Achromatopsia

242424
4A4A4A
666666
9C9C9C
A9A9A9

Shades & Tints Shades & Tints

#2A2704

Dark
Light

#5B4A1C

Dark
Light

#77682F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a2704;
  --color-2: #5b4a1c;
  --color-3: #77682f;
  --color-4: #96a773;
  --color-5: #95b794;
}

SCSS

$color-1: #2a2704;
$color-2: #5b4a1c;
$color-3: #77682f;
$color-4: #96a773;
$color-5: #95b794;

TAILWIND

colors: {
  'brand-1': '#2a2704',
  'brand-2': '#5b4a1c',
  'brand-3': '#77682f',
  'brand-4': '#96a773',
  'brand-5': '#95b794',
}

RGB Array

[42, 39, 4], [91, 74, 28], [119, 104, 47], [150, 167, 115], [149, 183, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2A2704, #5B4A1C, #77682F, #96A773, #95B794 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #2a2704; --color-2: #5b4a1c; --color-3: #77682f; --color-4: #96a773; --color-5: #95b794. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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