Named color · #B2CCE1
Charted
Charted is #B2CCE1: rgb(178 204 225), hsl(207 44% 79%), oklch(0.833 0.041 242.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Charted color name →
#B2CCE1
oklch(0.833 0.041 242.5)
Color conversions
- HEX
- #b2cce1
- RGB
- rgb(178 204 225)
- HSL
- hsl(207 44% 79%)
- HWB
- hwb(207 70% 12%)
- OKLCH
- oklch(0.833 0.041 242.5)
- OKLab
- oklab(0.833 -0.019 -0.036)
- CIE Lab
- lab(80.6 -5.69 -13.54)
- LCH
- lch(80.6 14.69 247.2)
- CMYK
- cmyk(21% 9% 0% 12%)
Tints · Shades · Tones
Tints
- BAD1E4
- C1D6E7
- C9DBEA
- D1E0ED
- D8E5F0
- E0EAF3
- E8F0F6
- EFF5F9
- F7FAFC
Shades
- 9AB1C4
- 8397A7
- 6D7E8B
- 576570
- 434E56
- 2F373E
- 1D2227
- 0C0F12
- 010202
Tones
- ADC4D7
- A8BCCD
- A3B5C3
- 9EADB9
- 99A5AF
- 949EA6
- 8F969C
- 8A8F93
- 858789
Color harmonies
Complementary +180°
- B2CCE1
Charted
- DCC3AE
≈ Sienna Dust
Analogous -30° +30°
- B2CCE1
Charted
- ABD0D8
≈ Aqua Frost
- BFC7E3
≈ Twilight Mist
Triadic +120° +240°
- B2CCE1
Charted
- E0BEC6
≈ Ice Hot Pink
- C3CDB0
≈ Growing Season
Split-complementary +150° +210°
- B2CCE1
Charted
- E1BFB8
≈ Silver Peony
- D1C8AB
≈ Desert Cover
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.66:1 · APCA Lc 29
Ag
AAAOn black
WCAG 12.61:1 · APCA Lc 74
Best text color: #000000
WCAG 12.61:1 (AAA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--charted: #b2cce1;
--charted-rgb: 178 204 225;
--charted-oklch: oklch(0.833 0.041 242.5);
}
.element {
color: var(--charted);
background-color: hsl(207 44% 79%);
border-color: oklch(0.833 0.041 242.5);
}Tailwind CSS v4
@theme {
--color-charted: #b2cce1;
--color-charted-50: #ecf7ff;
--color-charted-100: #ddeaf5;
--color-charted-200: #c6d7e5;
--color-charted-300: #a7bacb;
--color-charted-400: #8aa2b5;
--color-charted-500: #6f8a9f;
--color-charted-600: #5e7587;
--color-charted-700: #4b5d6c;
--color-charted-800: #36444f;
--color-charted-900: #252f37;
--color-charted-950: #131c22;
}SCSS
$charted: #b2cce1;
$charted-rgb: 178, 204, 225;
$charted-light: mix(#fff, $charted, 20%);
$charted-dark: mix(#000, $charted, 20%);
.element {
color: $charted;
box-shadow: 0 0 0 2px rgba($charted, 0.35);
}