← Back to Editor

#86A09D · #FFFFFF · #B2CB7A · #C8E7EA · #00AA4F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#86A09D

Mineral Blue · LightSlateGray · Lake Green

HEX
#86A09D
RGB
rgb(134, 160, 157)
HSL
hsl(173, 12%, 58%)
HSB
hsb(173, 16%, 63%)
CMYK
cmyk(16%, 0%, 2%, 37%)
Oklch
oklch(68.5% 0.029 188.0)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#B2CB7A

Willow Green · Tan · Apple Green

HEX
#B2CB7A
RGB
rgb(178, 203, 122)
HSL
hsl(79, 44%, 64%)
HSB
hsb(79, 40%, 80%)
CMYK
cmyk(12%, 0%, 40%, 20%)
Oklch
oklch(80.5% 0.110 122.9)

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

#C8E7EA

Sky Blue · LightBlue · Glacier Blue

HEX
#C8E7EA
RGB
rgb(200, 231, 234)
HSL
hsl(185, 45%, 85%)
HSB
hsb(185, 15%, 92%)
CMYK
cmyk(15%, 1%, 0%, 8%)
Oklch
oklch(90.6% 0.033 203.7)

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

#00AA4F

Pine Green · SeaGreen · Forest Green

HEX
#00AA4F
RGB
rgb(0, 170, 79)
HSL
hsl(148, 100%, 33%)
HSB
hsb(148, 100%, 67%)
CMYK
cmyk(100%, 0%, 54%, 33%)
Oklch
oklch(64.5% 0.177 150.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86A09D
A1878A

Analogous

87A191
86A09D
8797A1

Triadic

86A09D
9E87A1
A19E87

Split-Comp.

86A09D
A18797
A19187

Tetradic

86A09D
9187A1
A1878A
97A187

Contrast Matrix WCAG 2.1 Contrast

86A09D
FFFFFF
B2CB7A
C8E7EA
00AA4F
—
2.8
Fail
1.6
Fail
2.1
Fail
1.1
Fail
2.8
Fail
—
1.8
Fail
1.3
Fail
3.1
AA Large
1.6
Fail
1.8
Fail
—
1.4
Fail
1.7
Fail
2.1
Fail
1.3
Fail
1.4
Fail
—
2.3
Fail
1.1
Fail
3.1
AA Large
1.7
Fail
2.3
Fail
—
White BG
2.8Fail
1.0Fail
1.8Fail
1.3Fail
3.1AA Large
Black BG
7.5AAA
21.0AAA
11.7AAA
16.1AAA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

91919E
FFFFFF
BDBD8E
D5D6E9
4A4B65

Deuteranopia

908E9E
FFFFFF
BBBA92
D4D1E9
40336A

Tritanopia

879E9E
FFFFFF
B39DA0
CAE9E9
09767A

Achromatopsia

989898
FFFFFF
BABABA
DEDEDE
6D6D6D

Shades & Tints Shades & Tints

#86A09D

Dark
Light

#FFFFFF

Dark
Light

#B2CB7A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86a09d;
  --color-2: #ffffff;
  --color-3: #b2cb7a;
  --color-4: #c8e7ea;
  --color-5: #00aa4f;
}

SCSS

$color-1: #86a09d;
$color-2: #ffffff;
$color-3: #b2cb7a;
$color-4: #c8e7ea;
$color-5: #00aa4f;

TAILWIND

colors: {
  'brand-1': '#86a09d',
  'brand-2': '#ffffff',
  'brand-3': '#b2cb7a',
  'brand-4': '#c8e7ea',
  'brand-5': '#00aa4f',
}

RGB Array

[134, 160, 157], [255, 255, 255], [178, 203, 122], [200, 231, 234], [0, 170, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86A09D, #FFFFFF, #B2CB7A, #C8E7EA, #00AA4F 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: #86a09d; --color-2: #ffffff; --color-3: #b2cb7a; --color-4: #c8e7ea; --color-5: #00aa4f. 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