← Back to Editor

#874B71 · #6A4F31 · #48B595 · #8CE66A · #CAF522

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#874B71

Rose Purple · DimGray · Camellia

HEX
#874B71
RGB
rgb(135, 75, 113)
HSL
hsl(322, 29%, 41%)
HSB
hsb(322, 44%, 53%)
CMYK
cmyk(0%, 44%, 16%, 47%)
Oklch
oklch(49.7% 0.095 342.5)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#6A4F31

Ochre · DarkOliveGreen · Amber Brown

HEX
#6A4F31
RGB
rgb(106, 79, 49)
HSL
hsl(32, 37%, 30%)
HSB
hsb(32, 54%, 42%)
CMYK
cmyk(0%, 25%, 54%, 58%)
Oklch
oklch(44.9% 0.057 68.4)

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

#48B595

Mineral Blue · CadetBlue · Mint Ice

HEX
#48B595
RGB
rgb(72, 181, 149)
HSL
hsl(162, 43%, 50%)
HSB
hsb(162, 60%, 71%)
CMYK
cmyk(60%, 0%, 18%, 29%)
Oklch
oklch(70.1% 0.111 170.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#8CE66A

Emerald · LightGreen · Apple Green

HEX
#8CE66A
RGB
rgb(140, 230, 106)
HSL
hsl(104, 71%, 66%)
HSB
hsb(104, 54%, 90%)
CMYK
cmyk(39%, 0%, 54%, 10%)
Oklch
oklch(84.1% 0.182 137.9)

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

#CAF522

Grass Green · GreenYellow · Olive Green

HEX
#CAF522
RGB
rgb(202, 245, 34)
HSL
hsl(72, 91%, 55%)
HSB
hsb(72, 86%, 96%)
CMYK
cmyk(18%, 0%, 86%, 4%)
Oklch
oklch(90.8% 0.213 121.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

874B71
4A8760

Analogous

7F4A87
874B71
874A52

Triadic

874B71
71874A
4A7187

Split-Comp.

874B71
52874A
4A877F

Tetradic

874B71
877F4A
4A8760
4A5287

Contrast Matrix WCAG 2.1 Contrast

874B71
6A4F31
48B595
8CE66A
CAF522
—
1.2
Fail
2.5
Fail
4.2
AA Large
5.1
AA
1.2
Fail
—
3.0
Fail
4.9
AA
6.0
AA
2.5
Fail
3.0
Fail
—
1.6
Fail
2.0
Fail
4.2
AA Large
4.9
AA
1.6
Fail
—
1.2
Fail
5.1
AA
6.0
AA
2.0
Fail
1.2
Fail
—
White BG
6.4AA
7.6AAA
2.5Fail
1.5Fail
1.3Fail
Black BG
3.3AA Large
2.8Fail
8.3AAA
13.6AAA
16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6C68
5E5E38
77789D
B3B488
DDDD55

Deuteranopia

717566
60623A
71699F
AEA78F
DAD761

Tritanopia

84615F
693E3F
4DA3A4
91A0A5
CC7D86

Achromatopsia

616161
545454
919191
BDBDBD
D0D0D0

Shades & Tints Shades & Tints

#874B71

Dark
Light

#6A4F31

Dark
Light

#48B595

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #874b71;
  --color-2: #6a4f31;
  --color-3: #48b595;
  --color-4: #8ce66a;
  --color-5: #caf522;
}

SCSS

$color-1: #874b71;
$color-2: #6a4f31;
$color-3: #48b595;
$color-4: #8ce66a;
$color-5: #caf522;

TAILWIND

colors: {
  'brand-1': '#874b71',
  'brand-2': '#6a4f31',
  'brand-3': '#48b595',
  'brand-4': '#8ce66a',
  'brand-5': '#caf522',
}

RGB Array

[135, 75, 113], [106, 79, 49], [72, 181, 149], [140, 230, 106], [202, 245, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #874B71, #6A4F31, #48B595, #8CE66A, #CAF522 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: #874b71; --color-2: #6a4f31; --color-3: #48b595; --color-4: #8ce66a; --color-5: #caf522. 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 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