Nearest named color · #BBCFE2
#BBCFE2
Nearest named color: Polar Opposite
#BBCFE2 (rgb(187 207 226), hsl(209 40% 81%), oklch(0.845 0.034 246.8)) is closest to the named color Polar Opposite. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#BBCFE2
oklch(0.845 0.034 246.8)
Color conversions
- HEX
- #bbcfe2
- RGB
- rgb(187 207 226)
- HSL
- hsl(209 40% 81%)
- HWB
- hwb(209 73% 11%)
- OKLCH
- oklch(0.845 0.034 246.8)
- OKLab
- oklab(0.845 -0.013 -0.032)
- CIE Lab
- lab(82.05 -4.05 -11.84)
- LCH
- lch(82.05 12.52 251.1)
- CMYK
- cmyk(17% 8% 0% 11%)
Tints · Shades · Tones
Tints
- C2D4E5
- C8D9E8
- CFDDEB
- D6E2EE
- DDE7F1
- E4ECF3
- EAF0F6
- F1F5F9
- F8FAFC
Shades
- A2B4C4
- 8A99A8
- 737F8C
- 5C6771
- 464F57
- 32383E
- 1F2327
- 0D1012
- 020203
Tones
- B5C7D8
- AFBFCE
- A9B7C4
- A3AFBA
- 9DA7B0
- 979FA6
- 91979C
- 8C8F93
- 868889
Color harmonies
Complementary +180°
- BBCFE2
Polar Opposite
- DCC8B5
≈ Cocoa Cream
Analogous -30° +30°
- BBCFE2
Polar Opposite
- B4D2DB
≈ Shrubby Lichen
- C6CBE3
≈ Periwinkle Powder
Triadic +120° +240°
- BBCFE2
Polar Opposite
- E1C4C8
≈ Pink Pandora
- C6D1B9
≈ Sweet Surrender
Split-complementary +150° +210°
- BBCFE2
Polar Opposite
- E1C5BD
≈ Golden Guernsey
- D2CDB4
≈ Steamboat Geyser
Tetradic +90° +180° +270°
- BBCFE2
Polar Opposite
- DCC4D5
≈ Blissful
- DCC8B5
≈ Cocoa Cream
- BBD3C3
≈ Sage Bundle
Contrast & accessibility
Ag
FailOn white
WCAG 1.59:1 · APCA Lc 27
Ag
AAAOn black
WCAG 13.13:1 · APCA Lc 76
Best text color: #000000
WCAG 13.13:1 (AAA) · APCA Lc 76
Contrast pairs
Code snippets
CSS
:root {
--polar-opposite: #bbcfe2;
--polar-opposite-rgb: 187 207 226;
--polar-opposite-oklch: oklch(0.845 0.034 246.8);
}
.element {
color: var(--polar-opposite);
background-color: hsl(209 40% 81%);
border-color: oklch(0.845 0.034 246.8);
}Tailwind CSS v4
@theme {
--color-polar-opposite: #bbcfe2;
--color-polar-opposite-50: #eef6ff;
--color-polar-opposite-100: #dfe9f3;
--color-polar-opposite-200: #c9d6e3;
--color-polar-opposite-300: #aab9c9;
--color-polar-opposite-400: #8fa1b2;
--color-polar-opposite-500: #74899c;
--color-polar-opposite-600: #637484;
--color-polar-opposite-700: #4f5d6a;
--color-polar-opposite-800: #39444e;
--color-polar-opposite-900: #272f36;
--color-polar-opposite-950: #151b21;
}SCSS
$polar-opposite: #bbcfe2;
$polar-opposite-rgb: 187, 207, 226;
$polar-opposite-light: mix(#fff, $polar-opposite, 20%);
$polar-opposite-dark: mix(#000, $polar-opposite, 20%);
.element {
color: $polar-opposite;
box-shadow: 0 0 0 2px rgba($polar-opposite, 0.35);
}