← Back to Editor

#B5D78C · #4A711A · #70B21B · #8EA9C4 · #2C6798

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#B5D78C

Willow Green · LightGreen · Apple Green

HEX
#B5D78C
RGB
rgb(181, 215, 140)
HSL
hsl(87, 48%, 70%)
HSB
hsb(87, 35%, 84%)
CMYK
cmyk(16%, 0%, 35%, 16%)
Oklch
oklch(83.6% 0.106 128.3)

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

#4A711A

Grass Green · DarkOliveGreen · Forest Green

HEX
#4A711A
RGB
rgb(74, 113, 26)
HSL
hsl(87, 63%, 27%)
HSB
hsb(87, 77%, 44%)
CMYK
cmyk(35%, 0%, 77%, 56%)
Oklch
oklch(50.1% 0.122 131.0)

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

#70B21B

Grass Green · Olive · Forest Green

HEX
#70B21B
RGB
rgb(112, 178, 27)
HSL
hsl(86, 74%, 40%)
HSB
hsb(86, 85%, 70%)
CMYK
cmyk(37%, 0%, 85%, 30%)
Oklch
oklch(69.3% 0.183 131.8)

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

#8EA9C4

Azure · DarkGray · Cobalt Blue

HEX
#8EA9C4
RGB
rgb(142, 169, 196)
HSL
hsl(210, 31%, 66%)
HSB
hsb(210, 28%, 77%)
CMYK
cmyk(28%, 14%, 0%, 23%)
Oklch
oklch(72.4% 0.050 248.5)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#2C6798

Lake Blue · SteelBlue · Prussian Blue

HEX
#2C6798
RGB
rgb(44, 103, 152)
HSL
hsl(207, 55%, 38%)
HSB
hsb(207, 71%, 60%)
CMYK
cmyk(71%, 32%, 0%, 40%)
Oklch
oklch(49.8% 0.100 246.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B5D78C
AF8ED7

Analogous

D7D48E
B5D78C
91D78E

Triadic

B5D78C
8EB6D7
D78EB6

Split-Comp.

B5D78C
8E91D7
D48ED7

Tetradic

B5D78C
8ED7D4
AF8ED7
D78E91

Contrast Matrix WCAG 2.1 Contrast

B5D78C
4A711A
70B21B
8EA9C4
2C6798
—
3.6
AA Large
1.6
Fail
1.5
Fail
3.7
AA Large
3.6
AA Large
—
2.2
Fail
2.4
Fail
1.0
Fail
1.6
Fail
2.2
Fail
—
1.1
Fail
2.3
Fail
1.5
Fail
2.4
Fail
1.1
Fail
—
2.5
Fail
3.7
AA Large
1.0
Fail
2.3
Fail
2.5
Fail
—
White BG
1.6Fail
5.7AA
2.6Fail
2.4Fail
6.0AA
Black BG
13.1AAA
3.7AA Large
8.1AAA
8.6AAA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C49E
5B5B2F
8D8D40
9A9ABD
46468C

Deuteranopia

C2BFA3
595634
898448
9896BC
423E89

Tritanopia

B7ACB0
4C4043
735C63
8FB8B7
2F8381

Achromatopsia

C4C4C4
5B5B5B
8D8D8D
A4A4A4
5B5B5B

Shades & Tints Shades & Tints

#B5D78C

Dark
Light

#4A711A

Dark
Light

#70B21B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b5d78c;
  --color-2: #4a711a;
  --color-3: #70b21b;
  --color-4: #8ea9c4;
  --color-5: #2c6798;
}

SCSS

$color-1: #b5d78c;
$color-2: #4a711a;
$color-3: #70b21b;
$color-4: #8ea9c4;
$color-5: #2c6798;

TAILWIND

colors: {
  'brand-1': '#b5d78c',
  'brand-2': '#4a711a',
  'brand-3': '#70b21b',
  'brand-4': '#8ea9c4',
  'brand-5': '#2c6798',
}

RGB Array

[181, 215, 140], [74, 113, 26], [112, 178, 27], [142, 169, 196], [44, 103, 152]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B5D78C, #4A711A, #70B21B, #8EA9C4, #2C6798 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b5d78c; --color-2: #4a711a; --color-3: #70b21b; --color-4: #8ea9c4; --color-5: #2c6798. 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 general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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