Named color · #15ABBE
Future
Future is #15ABBE: rgb(21 171 190), hsl(187 80% 41%), oklch(0.68 0.114 209.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Future color name →
#15ABBE
oklch(0.68 0.114 209.1)
Color conversions
- HEX
- #15abbe
- RGB
- rgb(21 171 190)
- HSL
- hsl(187 80% 41%)
- HWB
- hwb(187 8% 25%)
- OKLCH
- oklch(0.68 0.114 209.1)
- OKLab
- oklab(0.68 -0.1 -0.056)
- CIE Lab
- lab(63.74 -31.93 -20.59)
- LCH
- lch(63.74 37.99 212.8)
- CMYK
- cmyk(89% 10% 0% 25%)
Tints · Shades · Tones
Tints
- 42B4C5
- 5EBCCB
- 75C5D2
- 8BCDD8
- 9FD5DF
- B3DEE5
- C6E6EC
- D9EEF2
- ECF7F9
Shades
- 1194A5
- 0C7E8C
- 086875
- 05545E
- 034048
- 022D33
- 011B1F
- 000B0D
- 000102
Tones
- 32A7B8
- 43A3B1
- 4F9FAB
- 599AA5
- 62969F
- 699299
- 708D92
- 76898C
- 7B8586
Color harmonies
Complementary +180°
- 15ABBE
Future
- D57C6F
≈ Bite My Tongue
Analogous -30° +30°
- 15ABBE
Future
- 2BAF9A
≈ Pool Green
- 4CA1D7
≈ Waimea Blue
Triadic +120° +240°
- 15ABBE
Future
- BF7EBB
≈ Lavender Sweater
- B4943A
≈ Balsam Pear
Split-complementary +150° +210°
- 15ABBE
Future
- D17996
≈ Little Bow Pink
- CC864B
≈ Coral Sand
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.76:1 · APCA Lc 53
Ag
AAAOn black
WCAG 7.60:1 · APCA Lc 49
Best text color: #000000
WCAG 7.60:1 (AAA) · APCA Lc 49
Contrast pairs
Code snippets
CSS
:root {
--future: #15abbe;
--future-rgb: 21 171 190;
--future-oklch: oklch(0.68 0.114 209.1);
}
.element {
color: var(--future);
background-color: hsl(187 80% 41%);
border-color: oklch(0.68 0.114 209.1);
}Tailwind CSS v4
@theme {
--color-future: #15abbe;
--color-future-50: #d1ffff;
--color-future-100: #bcf3fe;
--color-future-200: #9ae2f0;
--color-future-300: #6bc7d9;
--color-future-400: #32b1c3;
--color-future-500: #009aaf;
--color-future-600: #008293;
--color-future-700: #006876;
--color-future-800: #004d56;
--color-future-900: #00353c;
--color-future-950: #002026;
}SCSS
$future: #15abbe;
$future-rgb: 21, 171, 190;
$future-light: mix(#fff, $future, 20%);
$future-dark: mix(#000, $future, 20%);
.element {
color: $future;
box-shadow: 0 0 0 2px rgba($future, 0.35);
}