Named color · #8ABBD0
Juvie
Juvie is #8ABBD0: rgb(138 187 208), hsl(198 43% 68%), oklch(0.765 0.06 226.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Juvie color name →
#8ABBD0
oklch(0.765 0.06 226.3)
Color conversions
- HEX
- #8abbd0
- RGB
- rgb(138 187 208)
- HSL
- hsl(198 43% 68%)
- HWB
- hwb(198 54% 18%)
- OKLCH
- oklch(0.765 0.06 226.3)
- OKLab
- oklab(0.765 -0.041 -0.043)
- CIE Lab
- lab(72.96 -12.91 -16.12)
- LCH
- lch(72.96 20.65 231.3)
- CMYK
- cmyk(34% 10% 0% 18%)
Tints · Shades · Tones
Tints
- 96C2D5
- A2C8D9
- ADCFDE
- B9D6E3
- C5DDE8
- D0E4EC
- DCEAF1
- E8F1F6
- F3F8FA
Shades
- 77A2B5
- 658A9A
- 537380
- 425C67
- 32464F
- 223239
- 141F23
- 070D10
- 010202
Tones
- 89B5C8
- 89AFC0
- 88A9B7
- 87A3AF
- 869DA7
- 85979F
- 849197
- 838C90
- 818688
Color harmonies
Complementary +180°
- 8ABBD0
Juvie
- D4A793
≈ Tiffany Rose
Analogous -30° +30°
- 8ABBD0
Juvie
- 85BFBF
≈ Riverbed
- 9AB5D9
≈ Mont Blanc
Triadic +120° +240°
- 8ABBD0
Juvie
- D0A4BA
≈ Enhance
- B7B68A
≈ Secret Glade
Split-complementary +150° +210°
- 8ABBD0
Juvie
- D6A4A5
≈ Rosetti Pink
- C9AE88
≈ Dromedary Camel
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.07:1 · APCA Lc 41
Ag
AAAOn black
WCAG 10.09:1 · APCA Lc 62
Best text color: #000000
WCAG 10.09:1 (AAA) · APCA Lc 62
Contrast pairs
Code snippets
CSS
:root {
--juvie: #8abbd0;
--juvie-rgb: 138 187 208;
--juvie-oklch: oklch(0.765 0.06 226.3);
}
.element {
color: var(--juvie);
background-color: hsl(198 43% 68%);
border-color: oklch(0.765 0.06 226.3);
}Tailwind CSS v4
@theme {
--color-juvie: #8abbd0;
--color-juvie-50: #e4f9ff;
--color-juvie-100: #d4ecf8;
--color-juvie-200: #bbdae9;
--color-juvie-300: #98bed0;
--color-juvie-400: #79a6ba;
--color-juvie-500: #598fa5;
--color-juvie-600: #4c798b;
--color-juvie-700: #3d6170;
--color-juvie-800: #2b4752;
--color-juvie-900: #1d3139;
--color-juvie-950: #0d1d23;
}SCSS
$juvie: #8abbd0;
$juvie-rgb: 138, 187, 208;
$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);
}