← Back to Editor

#86AFB9 · #F5FAF7 · #D9EBE8 · #B9D9D9 · #EBF5F1

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

WorkspaceReading

Color Details Color Details

#86AFB9

Sky Blue · DarkGray · Lake Green

HEX
#86AFB9
RGB
rgb(134, 175, 185)
HSL
hsl(192, 27%, 63%)
HSB
hsb(192, 28%, 73%)
CMYK
cmyk(28%, 5%, 0%, 27%)
Oklch
oklch(72.8% 0.046 214.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#F5FAF7

Celadon · Snow · Mint Green

HEX
#F5FAF7
RGB
rgb(245, 250, 247)
HSL
hsl(144, 33%, 97%)
HSB
hsb(144, 2%, 98%)
CMYK
cmyk(2%, 0%, 1%, 2%)
Oklch
oklch(98.1% 0.007 160.1)

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

#D9EBE8

Jade · Lavender · Glacier Blue

HEX
#D9EBE8
RGB
rgb(217, 235, 232)
HSL
hsl(170, 31%, 89%)
HSB
hsb(170, 8%, 92%)
CMYK
cmyk(8%, 0%, 1%, 8%)
Oklch
oklch(92.6% 0.019 184.9)

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

#B9D9D9

Sky Blue · LightBlue · Glacier Blue

HEX
#B9D9D9
RGB
rgb(185, 217, 217)
HSL
hsl(180, 30%, 79%)
HSB
hsb(180, 15%, 85%)
CMYK
cmyk(15%, 0%, 0%, 15%)
Oklch
oklch(86.2% 0.034 196.5)

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

#EBF5F1

Jade · Lavender · Mint Green

HEX
#EBF5F1
RGB
rgb(235, 245, 241)
HSL
hsl(156, 33%, 94%)
HSB
hsb(156, 4%, 96%)
CMYK
cmyk(4%, 0%, 2%, 4%)
Oklch
oklch(96.2% 0.012 170.3)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

86AFB9
BA9187

Analogous

87BAAB
86AFB9
8796BA

Triadic

86AFB9
BA87B0
B0BA87

Split-Comp.

86AFB9
BA8796
BAAB87

Tetradic

86AFB9
AB87BA
BA9187
96BA87

Contrast Matrix WCAG 2.1 Contrast

86AFB9
F5FAF7
D9EBE8
B9D9D9
EBF5F1
—
2.2
Fail
1.9
Fail
1.6
Fail
2.1
Fail
2.2
Fail
—
1.2
Fail
1.4
Fail
1.1
Fail
1.9
Fail
1.2
Fail
—
1.2
Fail
1.1
Fail
1.6
Fail
1.4
Fail
1.2
Fail
—
1.3
Fail
2.1
Fail
1.1
Fail
1.1
Fail
1.3
Fail
—
White BG
2.4Fail
1.1Fail
1.2Fail
1.5Fail
1.1Fail
Black BG
8.8AAA
19.9AAA
17.0AAA
14.0AAA
18.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9898B7
F7F7F8
E1E1E9
C7C7D9
EFEFF2

Deuteranopia

9592B6
F7F7F8
E0DEE9
C5C3D9
EFEEF2

Tritanopia

88B5B4
F5F8F8
DAE9E9
BBD9D9
ECF3F3

Achromatopsia

A4A4A4
F8F8F8
E5E5E5
CFCFCF
F2F2F2

Shades & Tints Shades & Tints

#86AFB9

Dark
Light

#F5FAF7

Dark
Light

#D9EBE8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #86afb9;
  --color-2: #f5faf7;
  --color-3: #d9ebe8;
  --color-4: #b9d9d9;
  --color-5: #ebf5f1;
}

SCSS

$color-1: #86afb9;
$color-2: #f5faf7;
$color-3: #d9ebe8;
$color-4: #b9d9d9;
$color-5: #ebf5f1;

TAILWIND

colors: {
  'brand-1': '#86afb9',
  'brand-2': '#f5faf7',
  'brand-3': '#d9ebe8',
  'brand-4': '#b9d9d9',
  'brand-5': '#ebf5f1',
}

RGB Array

[134, 175, 185], [245, 250, 247], [217, 235, 232], [185, 217, 217], [235, 245, 241]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #86AFB9, #F5FAF7, #D9EBE8, #B9D9D9, #EBF5F1 is ideal for: health products, baby brands, fresh-style blogs. 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: #86afb9; --color-2: #f5faf7; --color-3: #d9ebe8; --color-4: #b9d9d9; --color-5: #ebf5f1. 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. 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