Nearest named color · #ABD6EA
#ABD6EA
Nearest named color: Ariel
#ABD6EA (rgb(171 214 234), hsl(199 60% 79%), oklch(0.852 0.053 227.9)) is closest to the named color Ariel. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#ABD6EA
oklch(0.852 0.053 227.9)
Color conversions
- HEX
- #abd6ea
- RGB
- rgb(171 214 234)
- HSL
- hsl(199 60% 79%)
- HWB
- hwb(199 67% 8%)
- OKLCH
- oklch(0.852 0.053 227.9)
- OKLab
- oklab(0.852 -0.035 -0.039)
- CIE Lab
- lab(83.05 -11.2 -14.74)
- LCH
- lch(83.05 18.51 232.8)
- CMYK
- cmyk(27% 9% 0% 8%)
Tints · Shades · Tones
Tints
- B4DAEC
- BCDEEE
- C4E2F0
- CDE6F3
- D5EBF5
- DEEFF7
- E6F3F9
- EEF7FB
- F7FBFD
Shades
- 94BACB
- 7E9EAE
- 688491
- 546A75
- 40525A
- 2D3B41
- 1B2529
- 0B1013
- 010203
Tones
- A7CDDF
- A3C4D4
- 9EBBC9
- 9AB3BE
- 96AAB4
- 92A2A9
- 8D999F
- 899194
- 84888A
Color harmonies
Complementary +180°
- ABD6EA
Ariel
- EDC5B1
≈ Fatty Sashimi
Analogous -30° +30°
- ABD6EA
Ariel
- A6DADB
≈ Beachside Drive
- B9D0F2
≈ Frost Fairy
Triadic +120° +240°
- ABD6EA
Ariel
- EAC1D5
≈ Dreamy Memory
- D1D2AA
≈ Olive Martini
Split-complementary +150° +210°
- ABD6EA
Ariel
- EFC1C1
≈ Cafe Pink
- E2CBA8
≈ Gourmet Honey
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.55:1 · APCA Lc 25
Ag
AAAOn black
WCAG 13.53:1 · APCA Lc 78
Best text color: #000000
WCAG 13.53:1 (AAA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--ariel: #abd6ea;
--ariel-rgb: 171 214 234;
--ariel-oklch: oklch(0.852 0.053 227.9);
}
.element {
color: var(--ariel);
background-color: hsl(199 60% 79%);
border-color: oklch(0.852 0.053 227.9);
}Tailwind CSS v4
@theme {
--color-ariel: #abd6ea;
--color-ariel-50: #e7f8ff;
--color-ariel-100: #d7ecf6;
--color-ariel-200: #bed9e7;
--color-ariel-300: #9cbdce;
--color-ariel-400: #7ea5b7;
--color-ariel-500: #608ea2;
--color-ariel-600: #527889;
--color-ariel-700: #41606e;
--color-ariel-800: #2e4650;
--color-ariel-900: #1f3138;
--color-ariel-950: #0f1d23;
}SCSS
$ariel: #abd6ea;
$ariel-rgb: 171, 214, 234;
$ariel-light: mix(#fff, $ariel, 20%);
$ariel-dark: mix(#000, $ariel, 20%);
.element {
color: $ariel;
box-shadow: 0 0 0 2px rgba($ariel, 0.35);
}