Nearest named color · #66BADD
#66BADD
Nearest named color: Malibu
#66BADD (rgb(102 186 221), hsl(198 64% 63%), oklch(0.749 0.096 227.3)) is closest to the named color Malibu. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#66BADD
oklch(0.749 0.096 227.3)
Color conversions
- HEX
- #66badd
- RGB
- rgb(102 186 221)
- HSL
- hsl(198 64% 63%)
- HWB
- hwb(198 40% 13%)
- OKLCH
- oklch(0.749 0.096 227.3)
- OKLab
- oklab(0.749 -0.065 -0.07)
- CIE Lab
- lab(71.24 -19.21 -25.95)
- LCH
- lch(71.24 32.29 233.5)
- CMYK
- cmyk(54% 16% 0% 13%)
Tints · Shades · Tones
Tints
- 77C1E1
- 88C8E4
- 97CFE8
- A7D6EB
- B6DDEF
- C4E4F2
- D3EBF5
- E2F1F9
- F0F8FC
Shades
- 58A1C0
- 4A89A4
- 3C7288
- 2F5C6E
- 234655
- 17323D
- 0C1E26
- 040D11
- 000202
Tones
- 6BB4D3
- 6FAECA
- 72A9C1
- 75A3B7
- 789DAE
- 7A97A5
- 7C919B
- 7E8C92
- 7F8689
Color harmonies
Complementary +180°
- 66BADD
Malibu
- E09B79
≈ Mozzarella Covered Chorizo
Analogous -30° +30°
- 66BADD
Malibu
- 59C0C3
≈ Gem Turquoise
- 87B0EA
≈ Fly Away
Triadic +120° +240°
- 66BADD
Malibu
- DB95B9
≈ Techno Pink
- B4B269
≈ Rodham
Split-complementary +150° +210°
- 66BADD
Malibu
- E49598
≈ Marker Pink
- D0A666
≈ Burnside
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.18:1 · APCA Lc 43
Ag
AAAOn black
WCAG 9.63:1 · APCA Lc 59
Best text color: #000000
WCAG 9.63:1 (AAA) · APCA Lc 59
Contrast pairs
Code snippets
CSS
:root {
--malibu: #66badd;
--malibu-rgb: 102 186 221;
--malibu-oklch: oklch(0.749 0.096 227.3);
}
.element {
color: var(--malibu);
background-color: hsl(198 64% 63%);
border-color: oklch(0.749 0.096 227.3);
}Tailwind CSS v4
@theme {
--color-malibu: #66badd;
--color-malibu-50: #dafbff;
--color-malibu-100: #c8efff;
--color-malibu-200: #aaddf5;
--color-malibu-300: #83c1df;
--color-malibu-400: #5baacb;
--color-malibu-500: #2d92b7;
--color-malibu-600: #297c9b;
--color-malibu-700: #21637c;
--color-malibu-800: #14495b;
--color-malibu-900: #0d3340;
--color-malibu-950: #011e29;
}SCSS
$malibu: #66badd;
$malibu-rgb: 102, 186, 221;
$malibu-light: mix(#fff, $malibu, 20%);
$malibu-dark: mix(#000, $malibu, 20%);
.element {
color: $malibu;
box-shadow: 0 0 0 2px rgba($malibu, 0.35);
}