← Back to Editor

#5B8F85 · #83A379 · #B4D4A1 · #E4FCBC · #F0FFDA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#5B8F85

Mineral Blue · SlateGray · Mint Ice

HEX
#5B8F85
RGB
rgb(91, 143, 133)
HSL
hsl(168, 22%, 46%)
HSB
hsb(168, 36%, 56%)
CMYK
cmyk(36%, 0%, 7%, 44%)
Oklch
oklch(61.0% 0.058 180.8)

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

#83A379

Celadon · DarkSeaGreen · Olive Green

HEX
#83A379
RGB
rgb(131, 163, 121)
HSL
hsl(106, 19%, 56%)
HSB
hsb(106, 26%, 64%)
CMYK
cmyk(20%, 0%, 26%, 36%)
Oklch
oklch(68.0% 0.070 138.3)

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

#B4D4A1

Celadon · Silver · Apple Green

HEX
#B4D4A1
RGB
rgb(180, 212, 161)
HSL
hsl(98, 37%, 73%)
HSB
hsb(98, 24%, 83%)
CMYK
cmyk(15%, 0%, 24%, 17%)
Oklch
oklch(83.3% 0.077 134.0)

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

#E4FCBC

Willow Green · Wheat · Mint Green

HEX
#E4FCBC
RGB
rgb(228, 252, 188)
HSL
hsl(83, 91%, 86%)
HSB
hsb(83, 25%, 99%)
CMYK
cmyk(10%, 0%, 25%, 1%)
Oklch
oklch(95.8% 0.087 124.7)

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

#F0FFDA

Willow Green · Beige · Mint Green

HEX
#F0FFDA
RGB
rgb(240, 255, 218)
HSL
hsl(84, 100%, 93%)
HSB
hsb(84, 15%, 100%)
CMYK
cmyk(6%, 0%, 15%, 0%)
Oklch
oklch(97.9% 0.051 125.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B8F85
8F5B66

Analogous

5B8F6B
5B8F85
5B808F

Triadic

5B8F85
855B8F
8F855B

Split-Comp.

5B8F85
8F5B80
8F6B5B

Tetradic

5B8F85
6B5B8F
8F5B66
808F5B

Contrast Matrix WCAG 2.1 Contrast

5B8F85
83A379
B4D4A1
E4FCBC
F0FFDA
—
1.3
Fail
2.3
Fail
3.3
AA Large
3.5
AA Large
1.3
Fail
—
1.7
Fail
2.5
Fail
2.7
Fail
2.3
Fail
1.7
Fail
—
1.5
Fail
1.6
Fail
3.3
AA Large
2.5
Fail
1.5
Fail
—
1.1
Fail
3.5
AA Large
2.7
Fail
1.6
Fail
1.1
Fail
—
White BG
3.7AA Large
2.8Fail
1.6Fail
1.1Fail
1.0Fail
Black BG
5.7AA
7.5AAA
12.9AAA
18.9AAA
20.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

727287
919183
C2C2AD
EEEFCB
F6F7E3

Deuteranopia

6F6B88
8F8D86
C0BEB0
EDEBCF
F6F5E5

Tritanopia

5E898A
858B8D
B6B7B9
E5D8DA
F1EAEC

Achromatopsia

7E7E7E
959595
C5C5C5
EEEEEE
F6F6F6

Shades & Tints Shades & Tints

#5B8F85

Dark
Light

#83A379

Dark
Light

#B4D4A1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b8f85;
  --color-2: #83a379;
  --color-3: #b4d4a1;
  --color-4: #e4fcbc;
  --color-5: #f0ffda;
}

SCSS

$color-1: #5b8f85;
$color-2: #83a379;
$color-3: #b4d4a1;
$color-4: #e4fcbc;
$color-5: #f0ffda;

TAILWIND

colors: {
  'brand-1': '#5b8f85',
  'brand-2': '#83a379',
  'brand-3': '#b4d4a1',
  'brand-4': '#e4fcbc',
  'brand-5': '#f0ffda',
}

RGB Array

[91, 143, 133], [131, 163, 121], [180, 212, 161], [228, 252, 188], [240, 255, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5B8F85, #83A379, #B4D4A1, #E4FCBC, #F0FFDA is ideal for: health products, baby brands, fresh-style blogs, 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: #5b8f85; --color-2: #83a379; --color-3: #b4d4a1; --color-4: #e4fcbc; --color-5: #f0ffda. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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