← Back to Editor

#86FA8A · #B4F779 · #4A9787 · #4B56B5 · #3F95F1

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#86FA8A

Emerald · LightGreen · Apple Green

HEX
#86FA8A
RGB
rgb(134, 250, 138)
HSL
hsl(122, 92%, 75%)
HSB
hsb(122, 46%, 98%)
CMYK
cmyk(46%, 0%, 45%, 2%)
Oklch
oklch(89.1% 0.184 144.5)

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

#B4F779

Emerald · LightGreen · Apple Green

HEX
#B4F779
RGB
rgb(180, 247, 121)
HSL
hsl(92, 89%, 72%)
HSB
hsb(92, 51%, 97%)
CMYK
cmyk(27%, 0%, 51%, 3%)
Oklch
oklch(90.5% 0.172 132.1)

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

#4A9787

Mineral Blue · CadetBlue · Mint Ice

HEX
#4A9787
RGB
rgb(74, 151, 135)
HSL
hsl(168, 34%, 44%)
HSB
hsb(168, 51%, 59%)
CMYK
cmyk(51%, 0%, 11%, 41%)
Oklch
oklch(62.3% 0.081 178.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#4B56B5

Indigo · SlateBlue · Navy Blue

HEX
#4B56B5
RGB
rgb(75, 86, 181)
HSL
hsl(234, 42%, 50%)
HSB
hsb(234, 59%, 71%)
CMYK
cmyk(59%, 52%, 0%, 29%)
Oklch
oklch(49.6% 0.149 274.6)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#3F95F1

Azure · DodgerBlue · Navy Blue

HEX
#3F95F1
RGB
rgb(63, 149, 241)
HSL
hsl(211, 86%, 60%)
HSB
hsb(211, 74%, 95%)
CMYK
cmyk(74%, 38%, 0%, 5%)
Oklch
oklch(66.2% 0.160 252.7)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86FA8A
FA85F6

Analogous

BBFA85
86FA8A
85FAC3

Triadic

86FA8A
8985FA
FA8985

Split-Comp.

86FA8A
C385FA
FA85BB

Tetradic

86FA8A
85BBFA
FA85F6
FAC385

Contrast Matrix WCAG 2.1 Contrast

86FA8A
B4F779
4A9787
4B56B5
3F95F1
—
1.0
Fail
2.6
Fail
4.9
AA
2.4
Fail
1.0
Fail
—
2.7
Fail
5.0
AA
2.4
Fail
2.6
Fail
2.7
Fail
—
1.8
Fail
1.1
Fail
4.9
AA
5.0
AA
1.8
Fail
—
2.1
Fail
2.4
Fail
2.4
Fail
1.1
Fail
2.1
Fail
—
White BG
1.3Fail
1.3Fail
3.5AA Large
6.4AA
3.1AA Large
Black BG
16.1AAA
16.5AAA
6.1AA
3.3AA Large
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B9A5
D1D297
6B6C8B
50509E
6465DB

Deuteranopia

B2A9AC
CDC89F
67618C
4F4E99
5F59D5

Tritanopia

8CBABF
B7B0B5
4E8E8F
4C8C88
43C9C5

Achromatopsia

CBCBCB
D5D5D5
7E7E7E
5E5E5E
868686

Shades & Tints Shades & Tints

#86FA8A

Dark
Light

#B4F779

Dark
Light

#4A9787

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86fa8a;
  --color-2: #b4f779;
  --color-3: #4a9787;
  --color-4: #4b56b5;
  --color-5: #3f95f1;
}

SCSS

$color-1: #86fa8a;
$color-2: #b4f779;
$color-3: #4a9787;
$color-4: #4b56b5;
$color-5: #3f95f1;

TAILWIND

colors: {
  'brand-1': '#86fa8a',
  'brand-2': '#b4f779',
  'brand-3': '#4a9787',
  'brand-4': '#4b56b5',
  'brand-5': '#3f95f1',
}

RGB Array

[134, 250, 138], [180, 247, 121], [74, 151, 135], [75, 86, 181], [63, 149, 241]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86FA8A, #B4F779, #4A9787, #4B56B5, #3F95F1 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: #86fa8a; --color-2: #b4f779; --color-3: #4a9787; --color-4: #4b56b5; --color-5: #3f95f1. 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