Named color · #B9C3E6
Canterbury Bells
Canterbury Bells is #B9C3E6: rgb(185 195 230), hsl(227 47% 81%), oklch(0.821 0.05 272.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Canterbury Bells color name →
#B9C3E6
oklch(0.821 0.05 272.7)
Color conversions
- HEX
- #b9c3e6
- RGB
- rgb(185 195 230)
- HSL
- hsl(227 47% 81%)
- HWB
- hwb(227 73% 10%)
- OKLCH
- oklch(0.821 0.05 272.7)
- OKLab
- oklab(0.821 0.002 -0.05)
- CIE Lab
- lab(78.88 1.89 -18.72)
- LCH
- lch(78.88 18.81 275.8)
- CMYK
- cmyk(20% 15% 0% 10%)
Tints · Shades · Tones
Tints
- C0C9E9
- C7CFEB
- CED5EE
- D4DBF0
- DBE1F3
- E2E7F5
- EAEDF8
- F1F3FA
- F8F9FD
Shades
- A0A9C8
- 8990AB
- 71788E
- 5B6073
- 464A59
- 313440
- 1E2028
- 0D0E13
- 020203
Tones
- B3BCDB
- ADB5D1
- A7AEC6
- A2A8BC
- 9CA1B2
- 969AA8
- 91949E
- 8B8D94
- 86878A
Color harmonies
Complementary +180°
- B9C3E6
Canterbury Bells
- D0C4A0
≈ Sand Trail
Analogous -30° +30°
- B9C3E6
Canterbury Bells
- A9C9E3
≈ Template
- CBBDE0
≈ Sweet Lucid Dreams
Triadic +120° +240°
- B9C3E6
Canterbury Bells
- E3B9B0
≈ Cavern Pink
- ADCEB5
≈ Pastel Mint Green
Split-complementary +150° +210°
- B9C3E6
Canterbury Bells
- DDBEA3
≈ Brown-Bag It
- BECAA6
≈ Pale Leaf
Tetradic +90° +180° +270°
- B9C3E6
Canterbury Bells
- E2B7C1
≈ Melanie
- D0C4A0
≈ Sand Trail
- A1D0C7
≈ Phosphorus
Contrast & accessibility
Ag
FailOn white
WCAG 1.74:1 · APCA Lc 32
Ag
AAAOn black
WCAG 12.01:1 · APCA Lc 71
Best text color: #000000
WCAG 12.01:1 (AAA) · APCA Lc 71
Contrast pairs
Code snippets
CSS
:root {
--canterbury-bells: #b9c3e6;
--canterbury-bells-rgb: 185 195 230;
--canterbury-bells-oklch: oklch(0.821 0.05 272.7);
}
.element {
color: var(--canterbury-bells);
background-color: hsl(227 47% 81%);
border-color: oklch(0.821 0.05 272.7);
}Tailwind CSS v4
@theme {
--color-canterbury-bells: #b9c3e6;
--color-canterbury-bells-50: #f0f4ff;
--color-canterbury-bells-100: #e2e7f9;
--color-canterbury-bells-200: #cdd3ea;
--color-canterbury-bells-300: #afb6d2;
--color-canterbury-bells-400: #949dbd;
--color-canterbury-bells-500: #7b84a8;
--color-canterbury-bells-600: #68708e;
--color-canterbury-bells-700: #535a72;
--color-canterbury-bells-800: #3c4254;
--color-canterbury-bells-900: #292d3b;
--color-canterbury-bells-950: #171a25;
}SCSS
$canterbury-bells: #b9c3e6;
$canterbury-bells-rgb: 185, 195, 230;
$canterbury-bells-light: mix(#fff, $canterbury-bells, 20%);
$canterbury-bells-dark: mix(#000, $canterbury-bells, 20%);
.element {
color: $canterbury-bells;
box-shadow: 0 0 0 2px rgba($canterbury-bells, 0.35);
}