Named color · #A3BBDA
Clear Lake Trail
Clear Lake Trail is #A3BBDA: rgb(163 187 218), hsl(214 43% 75%), oklch(0.784 0.052 254.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Clear Lake Trail color name →
#A3BBDA
oklch(0.784 0.052 254.9)
Color conversions
- HEX
- #a3bbda
- RGB
- rgb(163 187 218)
- HSL
- hsl(214 43% 75%)
- HWB
- hwb(214 64% 15%)
- OKLCH
- oklch(0.784 0.052 254.9)
- OKLab
- oklab(0.784 -0.013 -0.05)
- CIE Lab
- lab(74.84 -3.32 -18.51)
- LCH
- lch(74.84 18.81 259.8)
- CMYK
- cmyk(25% 14% 0% 15%)
Tints · Shades · Tones
Tints
- ACC2DE
- B5C8E2
- BECFE5
- C7D6E9
- D0DDED
- DAE4F0
- E3EAF4
- ECF1F8
- F6F8FB
Shades
- 8DA2BD
- 788AA2
- 637387
- 4F5C6C
- 3C4654
- 2A323C
- 191F25
- 0A0D11
- 010202
Tones
- A0B5D1
- 9CAFC7
- 99A9BE
- 95A3B5
- 929DAC
- 8E97A3
- 8B919A
- 878C91
- 848689
Color harmonies
Complementary +180°
- A3BBDA
Clear Lake Trail
- CDB595
≈ My Guinea Pig
Analogous -30° +30°
- A3BBDA
Clear Lake Trail
- 96C0D2
≈ Neptune’s Realm
- B5B5D9
≈ Wild Orchid Blue
Triadic +120° +240°
- A3BBDA
Clear Lake Trail
- D8ACAE
≈ Pale Persimmon
- ABC1A0
≈ Saxon
Split-complementary +150° +210°
- A3BBDA
Clear Lake Trail
- D6AF9E
≈ Adobe Village
- BDBB95
≈ Esprit
Tetradic +90° +180° +270°
- A3BBDA
Clear Lake Trail
- D2ACC0
≈ Winsome Orchid
- CDB595
≈ My Guinea Pig
- 9BC4B1
≈ Stanley
Contrast & accessibility
Ag
FailOn white
WCAG 1.96:1 · APCA Lc 38
Ag
AAAOn black
WCAG 10.67:1 · APCA Lc 65
Best text color: #000000
WCAG 10.67:1 (AAA) · APCA Lc 65
Contrast pairs
Code snippets
CSS
:root {
--clear-lake-trail: #a3bbda;
--clear-lake-trail-rgb: 163 187 218;
--clear-lake-trail-oklch: oklch(0.784 0.052 254.9);
}
.element {
color: var(--clear-lake-trail);
background-color: hsl(214 43% 75%);
border-color: oklch(0.784 0.052 254.9);
}Tailwind CSS v4
@theme {
--color-clear-lake-trail: #a3bbda;
--color-clear-lake-trail-50: #ecf6ff;
--color-clear-lake-trail-100: #dde9fa;
--color-clear-lake-trail-200: #c7d6eb;
--color-clear-lake-trail-300: #a7b9d2;
--color-clear-lake-trail-400: #8aa0bd;
--color-clear-lake-trail-500: #6f88a8;
--color-clear-lake-trail-600: #5e738e;
--color-clear-lake-trail-700: #4b5c72;
--color-clear-lake-trail-800: #364454;
--color-clear-lake-trail-900: #252f3b;
--color-clear-lake-trail-950: #131b25;
}SCSS
$clear-lake-trail: #a3bbda;
$clear-lake-trail-rgb: 163, 187, 218;
$clear-lake-trail-light: mix(#fff, $clear-lake-trail, 20%);
$clear-lake-trail-dark: mix(#000, $clear-lake-trail, 20%);
.element {
color: $clear-lake-trail;
box-shadow: 0 0 0 2px rgba($clear-lake-trail, 0.35);
}