← Back to Editor

#B7D186 · #5EBCA4 · #C70189 · #7E083D · #501535

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#B7D186

Willow Green · Tan · Apple Green

HEX
#B7D186
RGB
rgb(183, 209, 134)
HSL
hsl(81, 45%, 67%)
HSB
hsb(81, 36%, 82%)
CMYK
cmyk(12%, 0%, 36%, 18%)
Oklch
oklch(82.4% 0.103 124.2)

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

#5EBCA4

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#5EBCA4
RGB
rgb(94, 188, 164)
HSL
hsl(165, 41%, 55%)
HSB
hsb(165, 50%, 74%)
CMYK
cmyk(50%, 0%, 13%, 26%)
Oklch
oklch(73.1% 0.097 174.6)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#C70189

Rose Purple · MediumVioletRed · Eggplant

HEX
#C70189
RGB
rgb(199, 1, 137)
HSL
hsl(319, 99%, 39%)
HSB
hsb(319, 99%, 78%)
CMYK
cmyk(0%, 99%, 31%, 22%)
Oklch
oklch(55.0% 0.231 347.8)

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

#7E083D

Dark Violet · Brown · Camellia

HEX
#7E083D
RGB
rgb(126, 8, 61)
HSL
hsl(333, 88%, 26%)
HSB
hsb(333, 94%, 49%)
CMYK
cmyk(0%, 94%, 52%, 51%)
Oklch
oklch(38.7% 0.150 2.6)

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

#501535

Rose Purple · DarkSlateGray · Raspberry

HEX
#501535
RGB
rgb(80, 21, 53)
HSL
hsl(327, 58%, 20%)
HSB
hsb(327, 74%, 31%)
CMYK
cmyk(0%, 74%, 34%, 69%)
Oklch
oklch(30.5% 0.095 350.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7D186
9F85D1

Analogous

D1C585
B7D186
90D185

Triadic

B7D186
85B6D1
D185B6

Split-Comp.

B7D186
8590D1
C585D1

Tetradic

B7D186
85D1C5
9F85D1
D18590

Contrast Matrix WCAG 2.1 Contrast

B7D186
5EBCA4
C70189
7E083D
501535
—
1.4
Fail
3.3
AA Large
6.3
AA
8.3
AAA
1.4
Fail
—
2.4
Fail
4.6
AA
6.1
AA
3.3
AA Large
2.4
Fail
—
1.9
Fail
2.5
Fail
6.3
AA
4.6
AA
1.9
Fail
—
1.3
Fail
8.3
AAA
6.1
AA
2.5
Fail
1.3
Fail
—
White BG
1.7Fail
2.3Fail
5.5AA
10.6AAA
14.0AAA
Black BG
12.5AAA
9.2AAA
3.8AA Large
2.0Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C298
8788AA
716F68
4B4A30
36362D

Deuteranopia

C1BF9D
817AAB
7D8C60
525B2D
3A3E2B

Tritanopia

B8A6AA
63AEAF
BD4E48
782624
4D2726

Achromatopsia

C1C1C1
9D9D9D
4C4C4C
313131
2A2A2A

Shades & Tints Shades & Tints

#B7D186

Dark
Light

#5EBCA4

Dark
Light

#C70189

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7d186;
  --color-2: #5ebca4;
  --color-3: #c70189;
  --color-4: #7e083d;
  --color-5: #501535;
}

SCSS

$color-1: #b7d186;
$color-2: #5ebca4;
$color-3: #c70189;
$color-4: #7e083d;
$color-5: #501535;

TAILWIND

colors: {
  'brand-1': '#b7d186',
  'brand-2': '#5ebca4',
  'brand-3': '#c70189',
  'brand-4': '#7e083d',
  'brand-5': '#501535',
}

RGB Array

[183, 209, 134], [94, 188, 164], [199, 1, 137], [126, 8, 61], [80, 21, 53]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B7D186, #5EBCA4, #C70189, #7E083D, #501535 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b7d186; --color-2: #5ebca4; --color-3: #c70189; --color-4: #7e083d; --color-5: #501535. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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