← Back to Editor

#655846 · #8B9172 · #71E3A8 · #C5FC03 · #322C27

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

#655846

Ochre · DarkOliveGreen · Amber Brown

HEX
#655846
RGB
rgb(101, 88, 70)
HSL
hsl(35, 18%, 34%)
HSB
hsb(35, 31%, 40%)
CMYK
cmyk(0%, 13%, 31%, 60%)
Oklch
oklch(46.8% 0.033 75.8)

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

#8B9172

Grass Green · Gray · Olive Green

HEX
#8B9172
RGB
rgb(139, 145, 114)
HSL
hsl(72, 12%, 51%)
HSB
hsb(72, 21%, 57%)
CMYK
cmyk(4%, 0%, 21%, 43%)
Oklch
oklch(64.3% 0.045 116.6)

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

#71E3A8

Emerald · MediumAquaMarine · Apple Green

HEX
#71E3A8
RGB
rgb(113, 227, 168)
HSL
hsl(149, 67%, 67%)
HSB
hsb(149, 50%, 89%)
CMYK
cmyk(50%, 0%, 26%, 11%)
Oklch
oklch(83.3% 0.135 158.9)

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

#C5FC03

Grass Green · GreenYellow · Olive Green

HEX
#C5FC03
RGB
rgb(197, 252, 3)
HSL
hsl(73, 98%, 50%)
HSB
hsb(73, 99%, 99%)
CMYK
cmyk(22%, 0%, 99%, 1%)
Oklch
oklch(91.9% 0.228 124.1)

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

#322C27

Tangerine · DarkSlateGray · Cinnamon

HEX
#322C27
RGB
rgb(50, 44, 39)
HSL
hsl(27, 12%, 17%)
HSB
hsb(27, 22%, 20%)
CMYK
cmyk(0%, 12%, 22%, 80%)
Oklch
oklch(29.8% 0.012 62.1)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

655846
475466

Analogous

664A47
655846
646647

Triadic

655846
476659
594766

Split-Comp.

655846
476466
4A4766

Tetradic

655846
47664A
475466
664764

Contrast Matrix WCAG 2.1 Contrast

655846
8B9172
71E3A8
C5FC03
322C27
—
2.1
Fail
4.4
AA Large
5.7
AA
2.0
Fail
2.1
Fail
—
2.1
Fail
2.7
Fail
4.2
AA Large
4.4
AA Large
2.1
Fail
—
1.3
Fail
8.7
AAA
5.7
AA
2.7
Fail
1.3
Fail
—
11.3
AAA
2.0
Fail
4.2
AA Large
8.7
AAA
11.3
AAA
—
White BG
6.9AA
3.3AA Large
1.6Fail
1.2Fail
13.8AAA
Black BG
3.0AA Large
6.4AA
13.3AAA
17.3AAA
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F5F4A
8E8E7A
A2A3B6
DDDD3F
2F2F28

Deuteranopia

60614B
8D8D7B
9C93BA
DAD54E
303029

Tritanopia

644E4F
8B7F81
77C2C4
C86F79
322929

Achromatopsia

5A5A5A
8C8C8C
BABABA
CFCFCF
2D2D2D

Shades & Tints Shades & Tints

#655846

Dark
Light

#8B9172

Dark
Light

#71E3A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #655846;
  --color-2: #8b9172;
  --color-3: #71e3a8;
  --color-4: #c5fc03;
  --color-5: #322c27;
}

SCSS

$color-1: #655846;
$color-2: #8b9172;
$color-3: #71e3a8;
$color-4: #c5fc03;
$color-5: #322c27;

TAILWIND

colors: {
  'brand-1': '#655846',
  'brand-2': '#8b9172',
  'brand-3': '#71e3a8',
  'brand-4': '#c5fc03',
  'brand-5': '#322c27',
}

RGB Array

[101, 88, 70], [139, 145, 114], [113, 227, 168], [197, 252, 3], [50, 44, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #655846, #8B9172, #71E3A8, #C5FC03, #322C27 is ideal for: 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: #655846; --color-2: #8b9172; --color-3: #71e3a8; --color-4: #c5fc03; --color-5: #322c27. 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. 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