← Back to Editor

#0F99F5 · #D8EBF0 · #BECDD1 · #93B2A8 · #546363

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

#0F99F5

Lake Blue · DodgerBlue · Navy Blue

HEX
#0F99F5
RGB
rgb(15, 153, 245)
HSL
hsl(204, 92%, 51%)
HSB
hsb(204, 94%, 96%)
CMYK
cmyk(94%, 38%, 0%, 4%)
Oklch
oklch(66.4% 0.171 246.9)

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

#D8EBF0

Sky Blue · Lavender · Glacier Blue

HEX
#D8EBF0
RGB
rgb(216, 235, 240)
HSL
hsl(193, 44%, 89%)
HSB
hsb(193, 10%, 94%)
CMYK
cmyk(10%, 2%, 0%, 6%)
Oklch
oklch(92.7% 0.021 215.3)

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

#BECDD1

Sky Blue · LightSteelBlue · Glacier Blue

HEX
#BECDD1
RGB
rgb(190, 205, 209)
HSL
hsl(193, 17%, 78%)
HSB
hsb(193, 9%, 82%)
CMYK
cmyk(9%, 2%, 0%, 18%)
Oklch
oklch(83.8% 0.017 215.5)

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

#93B2A8

Jade · DarkGray · Lake Green

HEX
#93B2A8
RGB
rgb(147, 178, 168)
HSL
hsl(161, 17%, 64%)
HSB
hsb(161, 17%, 70%)
CMYK
cmyk(17%, 0%, 6%, 30%)
Oklch
oklch(73.7% 0.037 173.7)

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

#546363

Slate Blue · DimGray · Charcoal

HEX
#546363
RGB
rgb(84, 99, 99)
HSL
hsl(180, 8%, 36%)
HSB
hsb(180, 15%, 39%)
CMYK
cmyk(15%, 0%, 0%, 61%)
Oklch
oklch(48.7% 0.018 196.6)

Traditional「Slate Blue」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0F99F5
F56B0F

Analogous

0FF5DE
0F99F5
0F26F5

Triadic

0F99F5
F50F99
99F50F

Split-Comp.

0F99F5
F50F26
F5DE0F

Tetradic

0F99F5
DE0FF5
F56B0F
26F50F

Contrast Matrix WCAG 2.1 Contrast

0F99F5
D8EBF0
BECDD1
93B2A8
546363
—
2.5
Fail
1.9
Fail
1.3
Fail
2.1
Fail
2.5
Fail
—
1.3
Fail
1.9
Fail
5.1
AA
1.9
Fail
1.3
Fail
—
1.4
Fail
3.8
AA Large
1.3
Fail
1.9
Fail
1.4
Fail
—
2.7
Fail
2.1
Fail
5.1
AA
3.8
AA Large
2.7
Fail
—
White BG
3.0AA Large
1.2Fail
1.6Fail
2.3Fail
6.3AA
Black BG
6.9AA
17.1AAA
12.8AAA
9.2AAA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

4B4CDF
E0E0EF
C4C5D0
A0A1AA
5A5B63

Deuteranopia

4338D9
DFDEEF
C4C3D0
9F9CAB
5A5963

Tritanopia

16CDC9
D9EEEE
BFCFCF
95ACAD
556363

Achromatopsia

7A7A7A
E6E6E6
C9C9C9
A8A8A8
5F5F5F

Shades & Tints Shades & Tints

#0F99F5

Dark
Light

#D8EBF0

Dark
Light

#BECDD1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0f99f5;
  --color-2: #d8ebf0;
  --color-3: #becdd1;
  --color-4: #93b2a8;
  --color-5: #546363;
}

SCSS

$color-1: #0f99f5;
$color-2: #d8ebf0;
$color-3: #becdd1;
$color-4: #93b2a8;
$color-5: #546363;

TAILWIND

colors: {
  'brand-1': '#0f99f5',
  'brand-2': '#d8ebf0',
  'brand-3': '#becdd1',
  'brand-4': '#93b2a8',
  'brand-5': '#546363',
}

RGB Array

[15, 153, 245], [216, 235, 240], [190, 205, 209], [147, 178, 168], [84, 99, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0F99F5, #D8EBF0, #BECDD1, #93B2A8, #546363 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: #0f99f5; --color-2: #d8ebf0; --color-3: #becdd1; --color-4: #93b2a8; --color-5: #546363. 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