Named color · #3194CE
Splish Splash
Splish Splash is #3194CE: rgb(49 148 206), hsl(202 62% 50%), oklch(0.636 0.125 239.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Splish Splash color name →
#3194CE
oklch(0.636 0.125 239.3)
Color conversions
- HEX
- #3194ce
- RGB
- rgb(49 148 206)
- HSL
- hsl(202 62% 50%)
- HWB
- hwb(202 19% 19%)
- OKLCH
- oklch(0.636 0.125 239.3)
- OKLab
- oklab(0.636 -0.064 -0.107)
- CIE Lab
- lab(57.71 -14.16 -38.7)
- LCH
- lch(57.71 41.21 249.9)
- CMYK
- cmyk(76% 28% 0% 19%)
Tints · Shades · Tones
Tints
- 4C9FD3
- 63AAD9
- 77B4DE
- 8BBFE3
- 9FCAE8
- B2D4ED
- C5DFF2
- D9EAF6
- ECF4FB
Shades
- 2980B3
- 226D98
- 1A5A7F
- 134866
- 0C364E
- 062638
- 031623
- 01080F
- 000102
Tones
- 3F92C6
- 4991BF
- 538FB7
- 5B8DAF
- 628BA7
- 6989A0
- 6F8798
- 758590
- 7B8288
Color harmonies
Complementary +180°
- 3194CE
Splish Splash
- C27633
≈ Orange Squash
Analogous -30° +30°
- 3194CE
Splish Splash
- 009DAF
≈ Lake Blue
- 6D86D7
≈ Tanzine
Triadic +120° +240°
- 3194CE
Splish Splash
- C76889
≈ Old Geranium
- 839533
≈ Antique Moss
Split-complementary +150° +210°
- 3194CE
Splish Splash
- CB6B5E
≈ Dash of Curry
- A98616
≈ Chestnut Gold
Tetradic +90° +180° +270°
- 3194CE
Splish Splash
- B46EB0
≈ Moonlight Melody
- C27633
≈ Orange Squash
- 4DA060
≈ Longing for Nature
Contrast & accessibility
Ag
FailOn white
WCAG 3.35:1 · APCA Lc 61
Ag
AAOn black
WCAG 6.25:1 · APCA Lc 41
Best text color: #000000
WCAG 6.25:1 (AA) · APCA Lc 41
Contrast pairs
Code snippets
CSS
:root {
--splish-splash: #3194ce;
--splish-splash-rgb: 49 148 206;
--splish-splash-oklch: oklch(0.636 0.125 239.3);
}
.element {
color: var(--splish-splash);
background-color: hsl(202 62% 50%);
border-color: oklch(0.636 0.125 239.3);
}Tailwind CSS v4
@theme {
--color-splish-splash: #3194ce;
--color-splish-splash-50: #d7fbff;
--color-splish-splash-100: #c4eeff;
--color-splish-splash-200: #a5dcff;
--color-splish-splash-300: #7bc0f1;
--color-splish-splash-400: #4fa8e0;
--color-splish-splash-500: #0f8fcf;
--color-splish-splash-600: #1479af;
--color-splish-splash-700: #11618c;
--color-splish-splash-800: #054868;
--color-splish-splash-900: #043249;
--color-splish-splash-950: #001d30;
}SCSS
$splish-splash: #3194ce;
$splish-splash-rgb: 49, 148, 206;
$splish-splash-light: mix(#fff, $splish-splash, 20%);
$splish-splash-dark: mix(#000, $splish-splash, 20%);
.element {
color: $splish-splash;
box-shadow: 0 0 0 2px rgba($splish-splash, 0.35);
}