← Back to Editor

#B84E91 · #A75C7A · #9E6F61 · #A8865A · #B09F5A

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

#B84E91

Rose Purple · MediumVioletRed · Rose Pink

HEX
#B84E91
RGB
rgb(184, 78, 145)
HSL
hsl(322, 43%, 51%)
HSB
hsb(322, 58%, 72%)
CMYK
cmyk(0%, 58%, 21%, 28%)
Oklch
oklch(58.2% 0.157 344.3)

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

#A75C7A

Dark Violet · Gray · Rose Pink

HEX
#A75C7A
RGB
rgb(167, 92, 122)
HSL
hsl(336, 30%, 51%)
HSB
hsb(336, 45%, 65%)
CMYK
cmyk(0%, 45%, 27%, 35%)
Oklch
oklch(57.0% 0.104 355.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#9E6F61

Crimson · Gray · Passion Red

HEX
#9E6F61
RGB
rgb(158, 111, 97)
HSL
hsl(14, 24%, 50%)
HSB
hsb(14, 39%, 62%)
CMYK
cmyk(0%, 30%, 39%, 38%)
Oklch
oklch(58.6% 0.064 37.3)

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

#A8865A

Ginger · Gray · Warm Sun

HEX
#A8865A
RGB
rgb(168, 134, 90)
HSL
hsl(34, 31%, 51%)
HSB
hsb(34, 46%, 66%)
CMYK
cmyk(0%, 20%, 46%, 34%)
Oklch
oklch(64.2% 0.073 73.1)

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

#B09F5A

Ginger · Tan · Sunflower

HEX
#B09F5A
RGB
rgb(176, 159, 90)
HSL
hsl(48, 35%, 52%)
HSB
hsb(48, 49%, 69%)
CMYK
cmyk(0%, 10%, 49%, 31%)
Oklch
oklch(70.2% 0.092 95.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B84E91
4CB874

Analogous

A94CB8
B84E91
B84C5B

Triadic

B84E91
90B84C
4C90B8

Split-Comp.

B84E91
5BB84C
4CB8A9

Tetradic

B84E91
B8A94C
4CB874
4C5BB8

Contrast Matrix WCAG 2.1 Contrast

B84E91
A75C7A
9E6F61
A8865A
B09F5A
—
1.0
Fail
1.1
Fail
1.4
Fail
1.8
Fail
1.0
Fail
—
1.1
Fail
1.4
Fail
1.8
Fail
1.1
Fail
1.1
Fail
—
1.3
Fail
1.6
Fail
1.4
Fail
1.4
Fail
1.3
Fail
—
1.3
Fail
1.8
Fail
1.8
Fail
1.6
Fail
1.3
Fail
—
White BG
4.6AA
4.7AA
4.3AA Large
3.4AA Large
2.6Fail
Black BG
4.5AA
4.5AA Large
4.9AA
6.2AA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8981
878673
8A8964
999965
A9A86B

Deuteranopia

90987D
8B9171
8C9065
9B9E67
AAAB6F

Tritanopia

B37471
A36D6C
9C6768
A66D6F
AF787B

Achromatopsia

757575
767676
7B7B7B
8B8B8B
9C9C9C

Shades & Tints Shades & Tints

#B84E91

Dark
Light

#A75C7A

Dark
Light

#9E6F61

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b84e91;
  --color-2: #a75c7a;
  --color-3: #9e6f61;
  --color-4: #a8865a;
  --color-5: #b09f5a;
}

SCSS

$color-1: #b84e91;
$color-2: #a75c7a;
$color-3: #9e6f61;
$color-4: #a8865a;
$color-5: #b09f5a;

TAILWIND

colors: {
  'brand-1': '#b84e91',
  'brand-2': '#a75c7a',
  'brand-3': '#9e6f61',
  'brand-4': '#a8865a',
  'brand-5': '#b09f5a',
}

RGB Array

[184, 78, 145], [167, 92, 122], [158, 111, 97], [168, 134, 90], [176, 159, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B84E91, #A75C7A, #9E6F61, #A8865A, #B09F5A 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: #b84e91; --color-2: #a75c7a; --color-3: #9e6f61; --color-4: #a8865a; --color-5: #b09f5a. 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