← Back to Editor

#B0CC0E · #77BF19 · #0DA627 · #1B8767 · #F54E4E

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

#B0CC0E

Autumn Sage · GoldenRod · Honey Gold

HEX
#B0CC0E
RGB
rgb(176, 204, 14)
HSL
hsl(69, 87%, 43%)
HSB
hsb(69, 93%, 80%)
CMYK
cmyk(14%, 0%, 93%, 20%)
Oklch
oklch(79.6% 0.185 119.3)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#77BF19

Grass Green · Olive · Olive Green

HEX
#77BF19
RGB
rgb(119, 191, 25)
HSL
hsl(86, 77%, 42%)
HSB
hsb(86, 87%, 75%)
CMYK
cmyk(38%, 0%, 87%, 25%)
Oklch
oklch(72.9% 0.195 131.9)

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

#0DA627

Pine Green · ForestGreen · Forest Green

HEX
#0DA627
RGB
rgb(13, 166, 39)
HSL
hsl(130, 85%, 35%)
HSB
hsb(130, 92%, 65%)
CMYK
cmyk(92%, 0%, 77%, 35%)
Oklch
oklch(63.1% 0.200 144.2)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#1B8767

Mineral Blue · SeaGreen · Mint Ice

HEX
#1B8767
RGB
rgb(27, 135, 103)
HSL
hsl(162, 67%, 32%)
HSB
hsb(162, 80%, 53%)
CMYK
cmyk(80%, 0%, 24%, 47%)
Oklch
oklch(55.7% 0.106 167.5)

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

#F54E4E

Peach Pink · Tomato · Coral Red

HEX
#F54E4E
RGB
rgb(245, 78, 78)
HSL
hsl(0, 89%, 63%)
HSB
hsb(0, 68%, 96%)
CMYK
cmyk(0%, 68%, 68%, 4%)
Oklch
oklch(65.8% 0.204 24.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0CC0E
2B0ECD

Analogous

CD8A0E
B0CC0E
51CD0E

Triadic

B0CC0E
0EB0CD
CD0EB0

Split-Comp.

B0CC0E
0E51CD
8A0ECD

Tetradic

B0CC0E
0ECD8A
2B0ECD
CD0E51

Contrast Matrix WCAG 2.1 Contrast

B0CC0E
77BF19
0DA627
1B8767
F54E4E
—
1.2
Fail
1.8
Fail
2.4
Fail
1.9
Fail
1.2
Fail
—
1.4
Fail
2.0
Fail
1.5
Fail
1.8
Fail
1.4
Fail
—
1.4
Fail
1.1
Fail
2.4
Fail
2.0
Fail
1.4
Fail
—
1.3
Fail
1.9
Fail
1.5
Fail
1.1
Fail
1.3
Fail
—
White BG
1.8Fail
2.3Fail
3.2AA Large
4.5AA Large
3.5AA Large
Black BG
11.5AAA
9.3AAA
6.5AA
4.7AA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBC3C
969741
4F5146
4A4B6F
ADAB4E

Deuteranopia

BBB847
928D4B
463B4D
443B71
B6C34E

Tritanopia

B16068
7B6168
155E63
207576
ED4E4E

Achromatopsia

AEAEAE
979797
6A6A6A
636363
808080

Shades & Tints Shades & Tints

#B0CC0E

Dark
Light

#77BF19

Dark
Light

#0DA627

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0cc0e;
  --color-2: #77bf19;
  --color-3: #0da627;
  --color-4: #1b8767;
  --color-5: #f54e4e;
}

SCSS

$color-1: #b0cc0e;
$color-2: #77bf19;
$color-3: #0da627;
$color-4: #1b8767;
$color-5: #f54e4e;

TAILWIND

colors: {
  'brand-1': '#b0cc0e',
  'brand-2': '#77bf19',
  'brand-3': '#0da627',
  'brand-4': '#1b8767',
  'brand-5': '#f54e4e',
}

RGB Array

[176, 204, 14], [119, 191, 25], [13, 166, 39], [27, 135, 103], [245, 78, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0CC0E, #77BF19, #0DA627, #1B8767, #F54E4E 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: #b0cc0e; --color-2: #77bf19; --color-3: #0da627; --color-4: #1b8767; --color-5: #f54e4e. 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