← Back to Editor

#BAD1F0 · #C8DEF6 · #F3F7F6 · #121A2F · #C6CBCE

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

#BAD1F0

Azure · LightBlue · Sky Blue

HEX
#BAD1F0
RGB
rgb(186, 209, 240)
HSL
hsl(214, 64%, 84%)
HSB
hsb(214, 23%, 94%)
CMYK
cmyk(23%, 13%, 0%, 6%)
Oklch
oklch(85.4% 0.050 255.9)

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

#C8DEF6

Azure · Lavender · Sky Blue

HEX
#C8DEF6
RGB
rgb(200, 222, 246)
HSL
hsl(211, 72%, 87%)
HSB
hsb(211, 19%, 96%)
CMYK
cmyk(19%, 10%, 0%, 4%)
Oklch
oklch(89.2% 0.041 250.6)

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

#F3F7F6

Jade · Snow · Glacier Blue

HEX
#F3F7F6
RGB
rgb(243, 247, 246)
HSL
hsl(165, 20%, 96%)
HSB
hsb(165, 2%, 97%)
CMYK
cmyk(2%, 0%, 0%, 3%)
Oklch
oklch(97.3% 0.004 179.7)

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

#121A2F

Indigo · Black · Deep Sea Blue

HEX
#121A2F
RGB
rgb(18, 26, 47)
HSL
hsl(223, 45%, 13%)
HSB
hsb(223, 62%, 18%)
CMYK
cmyk(62%, 45%, 0%, 82%)
Oklch
oklch(22.2% 0.043 267.1)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#C6CBCE

Sky Blue · LightGray · Pearl Gray

HEX
#C6CBCE
RGB
rgb(198, 203, 206)
HSL
hsl(203, 8%, 79%)
HSB
hsb(203, 4%, 81%)
CMYK
cmyk(4%, 1%, 0%, 19%)
Oklch
oklch(83.9% 0.007 233.7)

Traditional「Sky Blue」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BAD1F0
F0DABC

Analogous

BCEDF0
BAD1F0
C0BCF0

Triadic

BAD1F0
F0BCD3
D3F0BC

Split-Comp.

BAD1F0
F0C0BC
EDF0BC

Tetradic

BAD1F0
F0BCED
F0DABC
BCF0C0

Contrast Matrix WCAG 2.1 Contrast

BAD1F0
C8DEF6
F3F7F6
121A2F
C6CBCE
—
1.1
Fail
1.4
Fail
11.1
AAA
1.0
Fail
1.1
Fail
—
1.3
Fail
12.5
AAA
1.2
Fail
1.4
Fail
1.3
Fail
—
16.0
AAA
1.5
Fail
11.1
AAA
12.5
AAA
16.0
AAA
—
10.6
AAA
1.0
Fail
1.2
Fail
1.5
Fail
10.6
AAA
—
White BG
1.6Fail
1.4Fail
1.1Fail
17.3AAA
1.6Fail
Black BG
13.5AAA
15.2AAA
19.4AAA
1.2Fail
12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C4E8
D2D2F0
F5F5F6
15162A
C8C8CD

Deuteranopia

C3C1E7
D0CFEF
F5F4F6
151429
C8C8CD

Tritanopia

BBE3E1
C9ECEB
F3F6F6
122625
C6CDCD

Achromatopsia

CECECE
DADADA
F6F6F6
1A1A1A
CACACA

Shades & Tints Shades & Tints

#BAD1F0

Dark
Light

#C8DEF6

Dark
Light

#F3F7F6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bad1f0;
  --color-2: #c8def6;
  --color-3: #f3f7f6;
  --color-4: #121a2f;
  --color-5: #c6cbce;
}

SCSS

$color-1: #bad1f0;
$color-2: #c8def6;
$color-3: #f3f7f6;
$color-4: #121a2f;
$color-5: #c6cbce;

TAILWIND

colors: {
  'brand-1': '#bad1f0',
  'brand-2': '#c8def6',
  'brand-3': '#f3f7f6',
  'brand-4': '#121a2f',
  'brand-5': '#c6cbce',
}

RGB Array

[186, 209, 240], [200, 222, 246], [243, 247, 246], [18, 26, 47], [198, 203, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BAD1F0, #C8DEF6, #F3F7F6, #121A2F, #C6CBCE 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: #bad1f0; --color-2: #c8def6; --color-3: #f3f7f6; --color-4: #121a2f; --color-5: #c6cbce. 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