← Back to Editor

#B1F100 · #C7F83E · #D4F870 · #C10087

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#B1F100

Grass Green · GreenYellow · Olive Green

HEX
#B1F100
RGB
rgb(177, 241, 0)
HSL
hsl(76, 100%, 47%)
HSB
hsb(76, 100%, 95%)
CMYK
cmyk(27%, 0%, 100%, 5%)
Oklch
oklch(88.2% 0.226 126.6)

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

#C7F83E

Willow Green · GreenYellow · Apple Green

HEX
#C7F83E
RGB
rgb(199, 248, 62)
HSL
hsl(76, 93%, 61%)
HSB
hsb(76, 75%, 97%)
CMYK
cmyk(20%, 0%, 75%, 3%)
Oklch
oklch(91.3% 0.207 123.7)

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

#D4F870

Willow Green · Khaki · Apple Green

HEX
#D4F870
RGB
rgb(212, 248, 112)
HSL
hsl(76, 91%, 71%)
HSB
hsb(76, 55%, 97%)
CMYK
cmyk(15%, 0%, 55%, 3%)
Oklch
oklch(92.6% 0.167 122.1)

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

#C10087

Rose Purple · MediumVioletRed · Eggplant

HEX
#C10087
RGB
rgb(193, 0, 135)
HSL
hsl(318, 100%, 38%)
HSB
hsb(318, 100%, 76%)
CMYK
cmyk(0%, 100%, 30%, 24%)
Oklch
oklch(53.8% 0.227 347.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1F100
4000F0

Analogous

F0B800
B1F100
38F000

Triadic

B1F100
00B0F0
F000B0

Split-Comp.

B1F100
0038F0
B800F0

Tetradic

B1F100
00F0B8
4000F0
F00038

Contrast Matrix WCAG 2.1 Contrast

B1F100
C7F83E
D4F870
C10087
—
1.1
Fail
1.1
Fail
4.3
AA Large
1.1
Fail
—
1.0
Fail
4.7
AA
1.1
Fail
1.0
Fail
—
4.8
AA
4.3
AA Large
4.7
AA
4.8
AA
—
White BG
1.4Fail
1.2Fail
1.2Fail
5.8AA
Black BG
15.5AAA
16.9AAA
17.5AAA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCD3A
DCDD6B
E4E491
6D6C66

Deuteranopia

C9C448
D9D676
E2DF99
79875F

Tritanopia

B46872
C98F96
D6ABB1
B74D47

Achromatopsia

C2C2C2
D4D4D4
DEDEDE
494949

Shades & Tints Shades & Tints

#B1F100

Dark
Light

#C7F83E

Dark
Light

#D4F870

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1f100;
  --color-2: #c7f83e;
  --color-3: #d4f870;
  --color-4: #c10087;
}

SCSS

$color-1: #b1f100;
$color-2: #c7f83e;
$color-3: #d4f870;
$color-4: #c10087;

TAILWIND

colors: {
  'brand-1': '#b1f100',
  'brand-2': '#c7f83e',
  'brand-3': '#d4f870',
  'brand-4': '#c10087',
}

RGB Array

[177, 241, 0], [199, 248, 62], [212, 248, 112], [193, 0, 135]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #B1F100, #C7F83E, #D4F870, #C10087 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 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b1f100; --color-2: #c7f83e; --color-3: #d4f870; --color-4: #c10087. 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 4-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