Nearest named color · #89B7CF
#89B7CF
Nearest named color: Juvie
#89B7CF (rgb(137 183 207), hsl(201 42% 67%), oklch(0.755 0.06 231.3)) is closest to the named color Juvie. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#89B7CF
oklch(0.755 0.06 231.3)
Color conversions
- HEX
- #89b7cf
- RGB
- rgb(137 183 207)
- HSL
- hsl(201 42% 67%)
- HWB
- hwb(201 54% 19%)
- OKLCH
- oklch(0.755 0.06 231.3)
- OKLab
- oklab(0.755 -0.037 -0.047)
- CIE Lab
- lab(71.75 -11.44 -17.38)
- LCH
- lch(71.75 20.81 236.6)
- CMYK
- cmyk(34% 12% 0% 19%)
Tints · Shades · Tones
Tints
- 95BED4
- A1C5D9
- ACCCDE
- B8D4E2
- C4DBE7
- D0E2EC
- DBE9F1
- E7F0F5
- F3F8FA
Shades
- 769FB4
- 648799
- 53707F
- 425A67
- 31454F
- 223138
- 141E23
- 070C10
- 010202
Tones
- 89B1C7
- 88ACBF
- 87A6B7
- 87A1AF
- 869BA7
- 85969F
- 849097
- 838B8F
- 818588
Color harmonies
Complementary +180°
- 89B7CF
Juvie
- CFA58D
≈ Autumn Malt
Analogous -30° +30°
- 89B7CF
Juvie
- 82BBBF
≈ Misty Cold Sea
- 9BB0D6
≈ Heartsong
Triadic +120° +240°
- 89B7CF
Juvie
- CEA0B4
≈ Quilted Heart
- B0B488
≈ Winter Pear
Split-complementary +150° +210°
- 89B7CF
Juvie
- D3A19F
≈ Ruby Eye
- C3AC85
≈ Croissant
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.15:1 · APCA Lc 42
Ag
AAAOn black
WCAG 9.73:1 · APCA Lc 60
Best text color: #000000
WCAG 9.73:1 (AAA) · APCA Lc 60
Contrast pairs
Code snippets
CSS
:root {
--juvie: #89b7cf;
--juvie-rgb: 137 183 207;
--juvie-oklch: oklch(0.755 0.06 231.3);
}
.element {
color: var(--juvie);
background-color: hsl(201 42% 67%);
border-color: oklch(0.755 0.06 231.3);
}Tailwind CSS v4
@theme {
--color-juvie: #89b7cf;
--color-juvie-50: #e5f9ff;
--color-juvie-100: #d5ecf9;
--color-juvie-200: #bcd9ea;
--color-juvie-300: #9abdd1;
--color-juvie-400: #7aa5bc;
--color-juvie-500: #5c8ea7;
--color-juvie-600: #4e788d;
--color-juvie-700: #3e6071;
--color-juvie-800: #2c4653;
--color-juvie-900: #1e313a;
--color-juvie-950: #0d1d24;
}SCSS
$juvie: #89b7cf;
$juvie-rgb: 137, 183, 207;
$juvie-light: mix(#fff, $juvie, 20%);
$juvie-dark: mix(#000, $juvie, 20%);
.element {
color: $juvie;
box-shadow: 0 0 0 2px rgba($juvie, 0.35);
}