#ABBFE3#ABBFE3
#ABBFE3 is a light, muted blue. Relative luminance 0.515; OKLCH L 80.2% C 0.056 H 262.2°. Best body text is #000000 at 11.29:1 contrast (WCAG AA passes).
Color values
| HEX | #ABBFE3 |
|---|---|
| RGB | rgb(171, 191, 227) |
| HSL | hsl(219, 50%, 78%) |
| HSV | hsv(219, 25%, 89%) |
| CMYK | cmyk(24.7%, 15.9%, 0%, 11%) |
| CIE-LAB | lab(76.96, 1.01, -20.19) |
| CIE-LCH | lch(76.96, 20.22, 272.87°) |
| OKLab | oklab(80.16% -0.0076 -0.0552) |
| OKLCH | oklch(80.16% 0.056 262.2) |
| XYZ | xyz(49.2868, 51.4641, 79.9949) |
| Luminance | 0.5147 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Lightsteelblue
#B0C4DE
ΔE00 3.49
Light Blue Grey
#B7C9E2
ΔE00 4.21
Cloudy Blue
#ACC2D9
ΔE00 4.88
Pastel Blue
#A2BFFE
ΔE00 5.12
Powder Blue (survey)
#B1D1FC
ΔE00 5.43
Light Periwinkle
#C1C6FC
ΔE00 6.44
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#ABBFE3 #E3CFAB
analogous
#ABDBE3 #ABBFE3 #B3ABE3
triadic
#ABBFE3 #E3ABBF #BFE3AB
tetradic
#ABBFE3 #E3ABDB #E3CFAB #ABE3B3
square
#ABBFE3 #E3ABDB #E3CFAB #ABE3B3
split-complementary
#ABBFE3 #E3B3AB #DBE3AB
monochromatic
#4F79C4 #7D9CD4 #ABBFE3 #D9E2F2 #E8EEF7
Accessibility & contrast
On white
1.86
#ABBFE3 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
11.29
#ABBFE3 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #ABBFE3
11.29:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##ABBFE3 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##ABBFE3 | 1.00 | 1.86 | 11.29 | 11.29 |
| #FFFFFF | 1.86 | 1.00 | 21.00 | 21.00 |
| #000000 | 11.29 | 21.00 | 1.00 | 1.00 |
| ##000000 | 11.29 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#B3C1E5
Deuteranopia (green-blind)
#AEBCE2
Tritanopia (blue-blind)
#9CC6CB
Achromatopsia (no color)
#BEBEBE
Design tokens & code
CSS
--color: #abbfe3; /* rgb */ color: rgb(171, 191, 227); /* oklch */ color: oklch(80.2% 0.056 262.2);
Tailwind
colors: {
custom: {
50: '#c5d2eb',
500: '#abbfe3',
950: '#000000',
},
}SCSS
$custom: #abbfe3; $custom-light: #c5d2eb; $custom-dark: #000000;
JSON
{
"hex": "#abbfe3",
"rgb": {
"r": 171,
"g": 191,
"b": 227
},
"hsl": {
"h": 218.571,
"s": 50,
"l": 78.039
},
"oklch": {
"l": 0.80159,
"c": 0.05574,
"h": 262.2
},
"luminance": 0.51466
}Semantic roles & 50–950 ramp
primary
#ABBFE3
secondary
#BDA375
accent
#8828BD
background
#FDFEFE
surface
#F9FBFD
border
#D2D4D5
text
#131416
muted
#828384