← Back to Editor

#A8A390 · #B88D84 · #C35C60 · #D30C43 · #5C3951

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 Library

Color Details Color Details

#A8A390

Ginger · DarkGray · Sunflower

HEX
#A8A390
RGB
rgb(168, 163, 144)
HSL
hsl(47, 12%, 61%)
HSB
hsb(47, 14%, 66%)
CMYK
cmyk(0%, 3%, 14%, 34%)
Oklch
oklch(71.4% 0.027 94.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#B88D84

Peach Pink · Tan · Coral Red

HEX
#B88D84
RGB
rgb(184, 141, 132)
HSL
hsl(10, 27%, 62%)
HSB
hsb(10, 28%, 72%)
CMYK
cmyk(0%, 23%, 28%, 28%)
Oklch
oklch(68.2% 0.054 32.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#C35C60

Crimson · Sienna · Passion Red

HEX
#C35C60
RGB
rgb(195, 92, 96)
HSL
hsl(358, 46%, 56%)
HSB
hsb(358, 53%, 76%)
CMYK
cmyk(0%, 53%, 51%, 24%)
Oklch
oklch(60.2% 0.132 19.5)

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

#D30C43

Dark Violet · Crimson · Camellia

HEX
#D30C43
RGB
rgb(211, 12, 67)
HSL
hsl(343, 89%, 44%)
HSB
hsb(343, 94%, 83%)
CMYK
cmyk(0%, 94%, 68%, 17%)
Oklch
oklch(55.3% 0.217 16.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#5C3951

Rose Purple · DarkSlateGray · Eggplant

HEX
#5C3951
RGB
rgb(92, 57, 81)
HSL
hsl(319, 23%, 29%)
HSB
hsb(319, 38%, 36%)
CMYK
cmyk(0%, 38%, 12%, 64%)
Oklch
oklch(39.5% 0.061 339.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A8A390
9095A7

Analogous

A79690
A8A390
A1A790

Triadic

A8A390
90A7A2
A290A7

Split-Comp.

A8A390
90A1A7
9690A7

Tetradic

A8A390
90A796
9095A7
A790A1

Contrast Matrix WCAG 2.1 Contrast

A8A390
B88D84
C35C60
D30C43
5C3951
—
1.2
Fail
1.7
Fail
2.1
Fail
3.8
AA Large
1.2
Fail
—
1.4
Fail
1.8
Fail
3.3
AA Large
1.7
Fail
1.4
Fail
—
1.3
Fail
2.3
Fail
2.1
Fail
1.8
Fail
1.3
Fail
—
1.8
Fail
3.8
AA Large
3.3
AA Large
2.3
Fail
1.8
Fail
—
White BG
2.5Fail
2.9Fail
4.2AA Large
5.4AA
9.7AAA
Black BG
8.3AAA
7.2AAA
5.0AA
3.9AA Large
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A6A695
A5A586
96955F
7D7B36
4D4D4B

Deuteranopia

A6A796
A8AB87
9CA45F
889733
4F514A

Tritanopia

A89899
B68888
BE5E5E
C92B29
5A4746

Achromatopsia

A2A2A2
999999
7B7B7B
4E4E4E
464646

Shades & Tints Shades & Tints

#A8A390

Dark
Light

#B88D84

Dark
Light

#C35C60

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a8a390;
  --color-2: #b88d84;
  --color-3: #c35c60;
  --color-4: #d30c43;
  --color-5: #5c3951;
}

SCSS

$color-1: #a8a390;
$color-2: #b88d84;
$color-3: #c35c60;
$color-4: #d30c43;
$color-5: #5c3951;

TAILWIND

colors: {
  'brand-1': '#a8a390',
  'brand-2': '#b88d84',
  'brand-3': '#c35c60',
  'brand-4': '#d30c43',
  'brand-5': '#5c3951',
}

RGB Array

[168, 163, 144], [184, 141, 132], [195, 92, 96], [211, 12, 67], [92, 57, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A8A390, #B88D84, #C35C60, #D30C43, #5C3951 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: #a8a390; --color-2: #b88d84; --color-3: #c35c60; --color-4: #d30c43; --color-5: #5c3951. 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