Named color · #88D6DC
Vibrant Soft Blue
Vibrant Soft Blue is #88D6DC: rgb(136 214 220), hsl(184 55% 70%), oklch(0.828 0.077 202). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Vibrant Soft Blue color name →
#88D6DC
oklch(0.828 0.077 202)
Color conversions
- HEX
- #88d6dc
- RGB
- rgb(136 214 220)
- HSL
- hsl(184 55% 70%)
- HWB
- hwb(184 53% 14%)
- OKLCH
- oklch(0.828 0.077 202)
- OKLab
- oklab(0.828 -0.072 -0.029)
- CIE Lab
- lab(80.75 -23.89 -10.99)
- LCH
- lch(80.75 26.3 204.7)
- CMYK
- cmyk(38% 3% 0% 14%)
Tints · Shades · Tones
Tints
- 95DAE0
- A2DEE3
- AEE3E7
- BAE7EA
- C6EBEE
- D1EFF1
- DDF3F5
- E8F7F8
- F4FBFC
Shades
- 75BABF
- 639EA3
- 528488
- 416A6E
- 315254
- 223B3C
- 132526
- 061011
- 010202
Tones
- 88CDD2
- 88C4C9
- 88BCC0
- 88B3B6
- 87AAAD
- 86A2A4
- 85999B
- 839192
- 828889
Color harmonies
Complementary +180°
- 88D6DC
Vibrant Soft Blue
- F5B3B0
≈ Sango Pink
Analogous -30° +30°
- 88D6DC
Vibrant Soft Blue
- 92D7C1
≈ Chloride
- 93D0F0
≈ Slightly Spritzig
Triadic +120° +240°
- 88D6DC
Vibrant Soft Blue
- DFB6E5
≈ Pretty Petunia
- E0C28D
≈ Sequin
Split-complementary +150° +210°
- 88D6DC
Vibrant Soft Blue
- EFB2CC
≈ Fairy Tale
- F0B999
≈ Caramel Powder
Tetradic +90° +180° +270°
- 88D6DC
Vibrant Soft Blue
- C7BEF5
≈ Connecticut Lilac
- F5B3B0
≈ Sango Pink
- C7CC92
≈ Springtide Green
Contrast & accessibility
Ag
FailOn white
WCAG 1.65:1 · APCA Lc 29
Ag
AAAOn black
WCAG 12.69:1 · APCA Lc 74
Best text color: #000000
WCAG 12.69:1 (AAA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--vibrant-soft-blue: #88d6dc;
--vibrant-soft-blue-rgb: 136 214 220;
--vibrant-soft-blue-oklch: oklch(0.828 0.077 202);
}
.element {
color: var(--vibrant-soft-blue);
background-color: hsl(184 55% 70%);
border-color: oklch(0.828 0.077 202);
}Tailwind CSS v4
@theme {
--color-vibrant-soft-blue: #88d6dc;
--color-vibrant-soft-blue-50: #ddfcff;
--color-vibrant-soft-blue-100: #cbf0f4;
--color-vibrant-soft-blue-200: #aedee3;
--color-vibrant-soft-blue-300: #88c3ca;
--color-vibrant-soft-blue-400: #63acb2;
--color-vibrant-soft-blue-500: #3b959c;
--color-vibrant-soft-blue-600: #347e84;
--color-vibrant-soft-blue-700: #29656a;
--color-vibrant-soft-blue-800: #1c4a4d;
--color-vibrant-soft-blue-900: #123435;
--color-vibrant-soft-blue-950: #041f21;
}SCSS
$vibrant-soft-blue: #88d6dc;
$vibrant-soft-blue-rgb: 136, 214, 220;
$vibrant-soft-blue-light: mix(#fff, $vibrant-soft-blue, 20%);
$vibrant-soft-blue-dark: mix(#000, $vibrant-soft-blue, 20%);
.element {
color: $vibrant-soft-blue;
box-shadow: 0 0 0 2px rgba($vibrant-soft-blue, 0.35);
}