← Back to Editor

#B3E52B · #FC6CB2 · #878581 · #F4D93D · #2ECED6

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 App

Color Details Color Details

#B3E52B

Grass Green · GreenYellow · Olive Green

HEX
#B3E52B
RGB
rgb(179, 229, 43)
HSL
hsl(76, 78%, 53%)
HSB
hsb(76, 81%, 90%)
CMYK
cmyk(22%, 0%, 81%, 10%)
Oklch
oklch(85.6% 0.203 124.6)

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

#FC6CB2

Rouge · Orchid · Rose Pink

HEX
#FC6CB2
RGB
rgb(252, 108, 178)
HSL
hsl(331, 96%, 71%)
HSB
hsb(331, 57%, 99%)
CMYK
cmyk(0%, 57%, 29%, 1%)
Oklch
oklch(72.7% 0.189 352.5)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#878581

Ash · Gray · Warm Gray

HEX
#878581
RGB
rgb(135, 133, 129)
HSL
hsl(40, 2%, 52%)
HSB
hsb(40, 4%, 53%)
CMYK
cmyk(0%, 1%, 4%, 47%)
Oklch
oklch(61.7% 0.006 84.6)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#F4D93D

Autumn Sage · Gold · Sunflower

HEX
#F4D93D
RGB
rgb(244, 217, 61)
HSL
hsl(51, 89%, 60%)
HSB
hsb(51, 75%, 96%)
CMYK
cmyk(0%, 11%, 75%, 4%)
Oklch
oklch(88.2% 0.166 98.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#2ECED6

Lake Blue · Turquoise · Lake Green

HEX
#2ECED6
RGB
rgb(46, 206, 214)
HSL
hsl(183, 67%, 51%)
HSB
hsb(183, 79%, 84%)
CMYK
cmyk(79%, 4%, 0%, 16%)
Oklch
oklch(77.8% 0.124 200.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3E52B
5C2AE5

Analogous

E5B92A
B3E52B
55E52A

Triadic

B3E52B
2AB3E5
E52AB3

Split-Comp.

B3E52B
2A55E5
B92AE5

Tetradic

B3E52B
2AE5B9
5C2AE5
E52A55

Contrast Matrix WCAG 2.1 Contrast

B3E52B
FC6CB2
878581
F4D93D
2ECED6
—
1.8
Fail
2.5
Fail
1.0
Fail
1.3
Fail
1.8
Fail
—
1.4
Fail
1.9
Fail
1.4
Fail
2.5
Fail
1.4
Fail
—
2.6
Fail
1.9
Fail
1.0
Fail
1.9
Fail
2.6
Fail
—
1.4
Fail
1.3
Fail
1.4
Fail
1.9
Fail
1.4
Fail
—
White BG
1.5Fail
2.6Fail
3.7AA Large
1.4Fail
1.9Fail
Black BG
14.2AAA
7.9AAA
5.7AA
14.8AAA
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C958
BEBCA1
868682
E8E863
7375D4

Deuteranopia

C6C263
C6D19D
868682
EAEC6C
6A5ED4

Tritanopia

B57C83
F59491
878383
F38187
36D3D2

Achromatopsia

C1C1C1
9F9F9F
858585
CFCFCF
9F9F9F

Shades & Tints Shades & Tints

#B3E52B

Dark
Light

#FC6CB2

Dark
Light

#878581

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3e52b;
  --color-2: #fc6cb2;
  --color-3: #878581;
  --color-4: #f4d93d;
  --color-5: #2eced6;
}

SCSS

$color-1: #b3e52b;
$color-2: #fc6cb2;
$color-3: #878581;
$color-4: #f4d93d;
$color-5: #2eced6;

TAILWIND

colors: {
  'brand-1': '#b3e52b',
  'brand-2': '#fc6cb2',
  'brand-3': '#878581',
  'brand-4': '#f4d93d',
  'brand-5': '#2eced6',
}

RGB Array

[179, 229, 43], [252, 108, 178], [135, 133, 129], [244, 217, 61], [46, 206, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3E52B, #FC6CB2, #878581, #F4D93D, #2ECED6 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #b3e52b; --color-2: #fc6cb2; --color-3: #878581; --color-4: #f4d93d; --color-5: #2eced6. 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 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