← Back to Editor

#B2F709 · #F4FFFD · #81E684 · #079985 · #2D697C

bright

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#B2F709

Grass Green · GreenYellow · Olive Green

HEX
#B2F709
RGB
rgb(178, 247, 9)
HSL
hsl(77, 94%, 50%)
HSB
hsb(77, 96%, 97%)
CMYK
cmyk(28%, 0%, 96%, 3%)
Oklch
oklch(89.6% 0.231 127.4)

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

#F4FFFD

Jade · White · Glacier Blue

HEX
#F4FFFD
RGB
rgb(244, 255, 253)
HSL
hsl(169, 100%, 98%)
HSB
hsb(169, 4%, 100%)
CMYK
cmyk(4%, 0%, 1%, 0%)
Oklch
oklch(99.1% 0.012 184.1)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#81E684

Emerald · LightGreen · Apple Green

HEX
#81E684
RGB
rgb(129, 230, 132)
HSL
hsl(122, 67%, 70%)
HSB
hsb(122, 44%, 90%)
CMYK
cmyk(44%, 0%, 43%, 10%)
Oklch
oklch(84.0% 0.164 144.5)

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

#079985

Mineral Blue · Teal · Mint Ice

HEX
#079985
RGB
rgb(7, 153, 133)
HSL
hsl(172, 91%, 31%)
HSB
hsb(172, 95%, 60%)
CMYK
cmyk(95%, 0%, 13%, 40%)
Oklch
oklch(61.2% 0.111 179.0)

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

#2D697C

Slate Blue · SeaGreen · Mint Ice

HEX
#2D697C
RGB
rgb(45, 105, 124)
HSL
hsl(194, 47%, 33%)
HSB
hsb(194, 64%, 49%)
CMYK
cmyk(64%, 15%, 0%, 51%)
Oklch
oklch(49.0% 0.069 221.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2F709
4C08F7

Analogous

F7C308
B2F709
3CF708

Triadic

B2F709
08B3F7
F708B3

Split-Comp.

B2F709
083CF7
C308F7

Tetradic

B2F709
08F7C3
4C08F7
F7083C

Contrast Matrix WCAG 2.1 Contrast

B2F709
F4FFFD
81E684
079985
2D697C
—
1.3
Fail
1.2
Fail
2.7
Fail
4.7
AA
1.3
Fail
—
1.5
Fail
3.5
AA Large
6.0
AA
1.2
Fail
1.5
Fail
—
2.3
Fail
4.0
AA Large
2.7
Fail
3.5
AA Large
2.3
Fail
—
1.7
Fail
4.7
AA
6.0
AA
4.0
AA Large
1.7
Fail
—
White BG
1.3Fail
1.0Fail
1.5Fail
3.6AA Large
6.1AA
Black BG
16.2AAA
20.6AAA
13.6AAA
5.9AA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D043
F9F9FD
ADAE9C
46488A
474877

Deuteranopia

CCC750
F8F7FE
A79FA1
3E338B
443F76

Tritanopia

B5707A
F5FEFE
86AEB3
0E8E8F
307473

Achromatopsia

C7C7C7
FBFBFB
BDBDBD
6B6B6B
595959

Shades & Tints Shades & Tints

#B2F709

Dark
Light

#F4FFFD

Dark
Light

#81E684

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2f709;
  --color-2: #f4fffd;
  --color-3: #81e684;
  --color-4: #079985;
  --color-5: #2d697c;
}

SCSS

$color-1: #b2f709;
$color-2: #f4fffd;
$color-3: #81e684;
$color-4: #079985;
$color-5: #2d697c;

TAILWIND

colors: {
  'brand-1': '#b2f709',
  'brand-2': '#f4fffd',
  'brand-3': '#81e684',
  'brand-4': '#079985',
  'brand-5': '#2d697c',
}

RGB Array

[178, 247, 9], [244, 255, 253], [129, 230, 132], [7, 153, 133], [45, 105, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #B2F709, #F4FFFD, #81E684, #079985, #2D697C 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: #b2f709; --color-2: #f4fffd; --color-3: #81e684; --color-4: #079985; --color-5: #2d697c. 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 bright-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