Named color · #B5CDD7
Light Topaz Soft Blue
Light Topaz Soft Blue is #B5CDD7: rgb(181 205 215), hsl(198 30% 78%), oklch(0.834 0.029 224.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Light Topaz Soft Blue color name →
#B5CDD7
oklch(0.834 0.029 224.8)
Color conversions
- HEX
- #b5cdd7
- RGB
- rgb(181 205 215)
- HSL
- hsl(198 30% 78%)
- HWB
- hwb(198 71% 16%)
- OKLCH
- oklch(0.834 0.029 224.8)
- OKLab
- oklab(0.834 -0.021 -0.021)
- CIE Lab
- lab(80.83 -6.82 -7.86)
- LCH
- lch(80.83 10.4 229.1)
- CMYK
- cmyk(16% 5% 0% 16%)
Tints · Shades · Tones
Tints
- BCD2DB
- C4D7DF
- CBDCE3
- D2E1E7
- DAE6EB
- E1EBEF
- E9F0F3
- F0F5F7
- F7FAFB
Shades
- 9DB2BB
- 86989F
- 6F7E85
- 59666B
- 444E52
- 30383B
- 1D2325
- 0C0F11
- 020202
Tones
- B0C5CE
- AABDC5
- A5B5BC
- A0ADB3
- 9AA6AB
- 959EA2
- 909699
- 8A8F91
- 858788
Color harmonies
Complementary +180°
- B5CDD7
Light Topaz Soft Blue
- DAC3B9
≈ Summer Beige
Analogous -30° +30°
- B5CDD7
Light Topaz Soft Blue
- B3CFCE
≈ Turquoise Grey
- BCCADC
≈ Arctic Grey
Triadic +120° +240°
- B5CDD7
Light Topaz Soft Blue
- D7C1CD
≈ Mint Blossom Rose
- CBCAB4
≈ Tropical Fog
Split-complementary +150° +210°
- B5CDD7
Light Topaz Soft Blue
- DBC1C2
≈ Mud Pink
- D4C6B4
≈ Pastel Sand
Tetradic +90° +180° +270°
- B5CDD7
Light Topaz Soft Blue
- D0C3D6
≈ Seedless Grape
- DAC3B9
≈ Summer Beige
- C0CDBA
≈ Mellow Spring
Contrast & accessibility
Ag
FailOn white
WCAG 1.65:1 · APCA Lc 29
Ag
AAAOn black
WCAG 12.67:1 · APCA Lc 74
Best text color: #000000
WCAG 12.67:1 (AAA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--light-topaz-soft-blue: #b5cdd7;
--light-topaz-soft-blue-rgb: 181 205 215;
--light-topaz-soft-blue-oklch: oklch(0.834 0.029 224.8);
}
.element {
color: var(--light-topaz-soft-blue);
background-color: hsl(198 30% 78%);
border-color: oklch(0.834 0.029 224.8);
}Tailwind CSS v4
@theme {
--color-light-topaz-soft-blue: #b5cdd7;
--color-light-topaz-soft-blue-50: #edf7fc;
--color-light-topaz-soft-blue-100: #deeaf0;
--color-light-topaz-soft-blue-200: #c8d7de;
--color-light-topaz-soft-blue-300: #a8bbc3;
--color-light-topaz-soft-blue-400: #8da3ac;
--color-light-topaz-soft-blue-500: #728b95;
--color-light-topaz-soft-blue-600: #61757e;
--color-light-topaz-soft-blue-700: #4d5e65;
--color-light-topaz-soft-blue-800: #38454a;
--color-light-topaz-soft-blue-900: #263033;
--color-light-topaz-soft-blue-950: #141c1f;
}SCSS
$light-topaz-soft-blue: #b5cdd7;
$light-topaz-soft-blue-rgb: 181, 205, 215;
$light-topaz-soft-blue-light: mix(#fff, $light-topaz-soft-blue, 20%);
$light-topaz-soft-blue-dark: mix(#000, $light-topaz-soft-blue, 20%);
.element {
color: $light-topaz-soft-blue;
box-shadow: 0 0 0 2px rgba($light-topaz-soft-blue, 0.35);
}