← Back to Editor

#A83488 · #AE7088 · #B3A687 · #BCFD87 · #B7CB87

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

#A83488

Rose Purple · MediumVioletRed · Violet

HEX
#A83488
RGB
rgb(168, 52, 136)
HSL
hsl(317, 53%, 43%)
HSB
hsb(317, 69%, 66%)
CMYK
cmyk(0%, 69%, 19%, 34%)
Oklch
oklch(52.4% 0.176 340.7)

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

#AE7088

Dark Violet · Gray · Rose Pink

HEX
#AE7088
RGB
rgb(174, 112, 136)
HSL
hsl(337, 28%, 56%)
HSB
hsb(337, 36%, 68%)
CMYK
cmyk(0%, 36%, 22%, 32%)
Oklch
oklch(61.8% 0.084 355.0)

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

#B3A687

Ginger · Tan · Sunflower

HEX
#B3A687
RGB
rgb(179, 166, 135)
HSL
hsl(42, 22%, 62%)
HSB
hsb(42, 25%, 70%)
CMYK
cmyk(0%, 7%, 25%, 30%)
Oklch
oklch(72.8% 0.045 88.0)

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

#BCFD87

Emerald · LightGreen · Apple Green

HEX
#BCFD87
RGB
rgb(188, 253, 135)
HSL
hsl(93, 97%, 76%)
HSB
hsb(93, 47%, 99%)
CMYK
cmyk(26%, 0%, 47%, 1%)
Oklch
oklch(92.5% 0.163 132.5)

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

#B7CB87

Willow Green · Tan · Apple Green

HEX
#B7CB87
RGB
rgb(183, 203, 135)
HSL
hsl(78, 40%, 66%)
HSB
hsb(78, 33%, 80%)
CMYK
cmyk(10%, 0%, 33%, 20%)
Oklch
oklch(81.1% 0.093 121.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A83488
34A854

Analogous

8F34A8
A83488
A8344D

Triadic

A83488
87A834
3487A8

Split-Comp.

A83488
4DA834
34A88F

Tetradic

A83488
A88F34
34A854
344DA8

Contrast Matrix WCAG 2.1 Contrast

A83488
AE7088
B3A687
BCFD87
B7CB87
—
1.6
Fail
2.5
Fail
5.0
AA
3.4
AA Large
1.6
Fail
—
1.6
Fail
3.2
AA Large
2.2
Fail
2.5
Fail
1.6
Fail
—
2.0
Fail
1.4
Fail
5.0
AA
3.2
AA Large
2.0
Fail
—
1.5
Fail
3.4
AA Large
2.2
Fail
1.4
Fail
1.5
Fail
—
White BG
6.0AA
3.8AA Large
2.4Fail
1.2Fail
1.8Fail
Black BG
3.5AA Large
5.5AA
8.7AAA
17.5AAA
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

767574
939382
ADAD8F
D8D9A4
C0C097

Deuteranopia

7D856F
979B81
AEAF90
D4D0AA
BFBD9B

Tritanopia

A26460
AB7E7D
B29496
BFBABF
B8A4A7

Achromatopsia

606060
858585
A6A6A6
DCDCDC
BDBDBD

Shades & Tints Shades & Tints

#A83488

Dark
Light

#AE7088

Dark
Light

#B3A687

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a83488;
  --color-2: #ae7088;
  --color-3: #b3a687;
  --color-4: #bcfd87;
  --color-5: #b7cb87;
}

SCSS

$color-1: #a83488;
$color-2: #ae7088;
$color-3: #b3a687;
$color-4: #bcfd87;
$color-5: #b7cb87;

TAILWIND

colors: {
  'brand-1': '#a83488',
  'brand-2': '#ae7088',
  'brand-3': '#b3a687',
  'brand-4': '#bcfd87',
  'brand-5': '#b7cb87',
}

RGB Array

[168, 52, 136], [174, 112, 136], [179, 166, 135], [188, 253, 135], [183, 203, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A83488, #AE7088, #B3A687, #BCFD87, #B7CB87 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: #a83488; --color-2: #ae7088; --color-3: #b3a687; --color-4: #bcfd87; --color-5: #b7cb87. 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