#C5DBF2

Accessibility

AAA

14.79:1

Vs white / black

1.42:1 · 14.79:1

Sources

Library color

Codes

Formats

HEX

#c5dbf2

RGB

rgb(197, 219, 242)

RGBA

rgba(197, 219, 242, 1)

HSL

hsl(211, 63%, 86%)

HSLA

hsla(211, 63%, 86%, 1)

HSV

hsv(211, 19%, 95%)

LAB

lab(86.48% -2.59 -13.69)

LCH

lch(86.48% 13.93 259.29)

OKLAB

oklab(0.8823 -0.0139 -0.0371)

OKLCH

oklch(0.8823 0.0396 249.46)

XYZ

xyz(64.38, 68.94, 93.90)

CMYK

cmyk(19%, 10%, 0%, 5%)

CSS

color: #c5dbf2;

CSS variable

--color-c5dbf2: #c5dbf2;

SCSS

$color-c5dbf2: #c5dbf2;

JavaScript

const color = "#c5dbf2";

TypeScript

const color: string = "#c5dbf2";

React

style={{ backgroundColor: "#c5dbf2" }}

JSON

{ "hex": "#c5dbf2", "rgb": { "r": 197, "g": 219, "b": 242 }, "oklch": "oklch(0.8823 0.0396 249.46)" }

Export

Developer code

css

:root {
  --#c5dbf2-1: #c5dbf2;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

blue-200

Noticeably different · ΔE 3.59 · #BFDBFE

Nearest CSS named color

LightSteelBlue

Very different · ΔE 5.7 · #B0C4DE

Nearest Material color

blue-100

Noticeably different · ΔE 3.45 · #BBDEFB

Nearest Bootstrap color

light

Very different · ΔE 12.36 · #F8F9FA

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50e9f7ff 100dbeaf9 200c5d6e8 300adc0d4 4008fa4ba 50074899e 600617284 7004c5b6a 800394552 90027303a 950131b24

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

fafcfe f5f9fd f1f6fc ecf3fb e7f0fa e2edf9 ddeaf7 d8e7f6 d4e4f5 cfe1f4 cadef3 c5dbf2 b5c9de a4b7ca 94a4b6 8392a1 73808d 636e79 525b65 424951 31373d 212428 101214

Palette

Tints

Mixed toward white — soft backgrounds and highlights

fafcfe f5f9fd f1f6fc ecf3fb e7f0fa e2edf9 ddeaf7 d8e7f6 d4e4f5 cfe1f4 cadef3

Palette

Shades

Mixed toward black — depth, text, and emphasis

b5c9de a4b7ca 94a4b6 8392a1 73808d 636e79 525b65 424951 31373d 212428 101214

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

bfd3e8 baccdf b4c4d6 aebdcc a8b5c3 a3aeb9 9da6b0 979ea6 91979d 8c8f93 86888a

Harmony

Complementary

Opposite on the color wheel for contrast

#C5DBF2Stop 1 #F2DCC5Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#C5F1F2Stop 1 #C5DBF2Stop 2 #C6C5F2Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#C5DBF2Stop 1 #F2C5DBStop 2 #DBF2C5Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#C5DBF2Stop 1 #F2C6C5Stop 2 #F1F2C5Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#133253Stop 1 #215791Stop 2 #2F7DD0Stop 3 #6EA4DEStop 4 #ACCBECStop 5

Using this color

Where #c5dbf2 works

#C5DBF2 (#c5dbf2) sits in the blue family at about 211° hue, 63% saturation, and 86% lightness. Contrast is 1.42:1 on white and 14.79:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: blue-200 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

subtle surfaces, chips, and table stripes
text or icons on charcoal / dark mode

Do not use #c5dbf2 as small body text on white — 1.42:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

Family context: Trust, calm, and professionalism. The most used color in SaaS, finance, and healthcare. Common uses still include buttons, charts, and accents in the Blue range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Material Blue 100#BBDEFB Tailwind blue 200#BFDBFE Tailwind blue 100#DBEAFE Tailwind slate 300#CBD5E1 LightSteelBlue#B0C4DE Tailwind sky 200#BAE6FD Tailwind sky 100#E0F2FE Material Blue 50#E3F2FD Tailwind indigo 100#E0E7FF Tailwind slate 200#E2E8F0 Material Light Blue 100#B3E5FC Material Blue Grey 100#CFD8DC