#ccbaf1

Color #ccbaf1

A moderately saturated very light blue.

Closest named color Thistle #d8bfd8 · ΔE 16.23 Nearest Tailwind class violet-300 #c4b4ff · ΔE 4.9

Open in Palette generator Color wheel Color mixer Contrast checker Blindness simulator Gradient

Conversions

HEX

#ccbaf1

RGB

rgb(204, 186, 241)

HSL

hsl(259.6, 66.3%, 83.7%)

HSV / HSB

hsv(259.6, 22.8%, 94.5%)

CMYK

cmyk(15.4%, 22.8%, 0%, 5.5%)

LAB

lab(78.64, 16.98, -24.95)

LCH

lch(78.64, 30.18, 304.24)

OKLCH

oklch(82.2%, 0.0784, 299.67)

HWB

hwb(259.6, 72.9%, 5.5%)

Harmony colors

Complementary

#dff1ba

Analogous

#bac3f1

#ccbaf1

#e7baf1

Triadic

#ccbaf1

#f1ccba

#baf1cc

Split-complementary

#ccbaf1

#f1e7ba

#c3f1ba

Tetradic

#ccbaf1

#f1badf

#dff1ba

#baf1cc

Square

#ccbaf1

#f1bac3

#dff1ba

#baf1e7

Shades

Color #ccbaf1 mixed toward black.

#a07fe5

#7444d9

#5224b1

#371876

#1b0c3b

Tints

Color #ccbaf1 mixed toward white.

#d4c5f3

#ddd1f6

#e5dcf8

#eee8fa

#f6f3fd

Tones

Color #ccbaf1 mixed toward gray.

#cdbeec

#cfc3e8

#d1c8e3

#d2ccdf

#d4d1da

Accessibility

Aa White text on this color

1.77:1

Aa Black text on this color

11.86:1

Black text reads better on this background (11.86:1). That passes WCAG AAA (≥7:1) for normal-size text.

Under color vision deficiencies

Protanopia

#c4c4e5 · ΔE 7.2

Deuteranopia

#c6c7e2 · ΔE 9.2

Tritanopia

#cbdbd9 · ΔE 22.9

Achromatopsia

#c3c3c3 · ΔE 19.5

Left half is the original, right half is the simulated appearance. See all 8 vision types →

Code

CSS

background-color: #ccbaf1;

Tailwind (arbitrary value)

bg-[#ccbaf1]

Related colors

Medium Purple #9370db

Rebecca Purple #663399

Dark Slate Blue #483d8b

Medium Slate Blue #7b68ee

Slate Blue #6a5acd

Blue Violet #8a2be2

Frequently asked questions

#ccbaf1 (#ccbaf1) is rgb(204, 186, 241) in RGB.

No, #ccbaf1 is not web-safe. The nearest web-safe colors are among its tones and shades below.

Related tools

Colors

HEX to RGB Converter

Convert any HEX color code to its RGB and HSL equivalents, live, with copy-to-clipboard values.

Try it → Accessibility

Contrast Checker

Check the WCAG contrast ratio between any two colors, live, with AA/AAA pass-fail results.

Try it → Generators

Palette Generator

Generate complementary, analogous, triadic, split-complementary, tetradic, square, and monochromatic palettes from any base color.

Try it →

Build something with this color

Generate a full palette from #ccbaf1, or check how it holds up for accessibility.

Generate a palette → Check contrast