Named color · #1D5C83
Oceanic Motion
Oceanic Motion is #1D5C83: rgb(29 92 131), hsl(203 64% 31%), oklch(0.454 0.089 240.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Oceanic Motion color name →
#1D5C83
oklch(0.454 0.089 240.5)
Color conversions
- HEX
- #1d5c83
- RGB
- rgb(29 92 131)
- HSL
- hsl(203 64% 31%)
- HWB
- hwb(203 11% 49%)
- OKLCH
- oklch(0.454 0.089 240.5)
- OKLab
- oklab(0.454 -0.044 -0.078)
- CIE Lab
- lab(36.6 -9.5 -28.05)
- LCH
- lch(36.6 29.62 251.3)
- CMYK
- cmyk(78% 30% 0% 49%)
Tints · Shades · Tones
Tints
- 376B8F
- 4D7B9C
- 638BA8
- 799BB4
- 8EABC1
- A4BCCD
- BACCD9
- D1DDE6
- E8EEF2
Shades
- 184F71
- 134260
- 0E364F
- 092A3F
- 051F2F
- 031420
- 010A12
- 000306
- 000001
Tones
- 2B6083
- 366483
- 406783
- 4A6B83
- 546F83
- 5D7282
- 667682
- 6F7981
- 777D81
Color harmonies
Complementary +180°
- 1D5C83
Oceanic Motion
- 7A491B
≈ Russet
Analogous -30° +30°
- 1D5C83
Oceanic Motion
- 00626F
≈ Blue Lagoon
- 445388
≈ Demon Blue
Triadic +120° +240°
- 1D5C83
Oceanic Motion
- 7E4054
≈ Cheerful Wine
- 505E1E
≈ Obscure Olive
Split-complementary +150° +210°
- 1D5C83
Oceanic Motion
- 814237
≈ Outrageous
- 695409
≈ Ayahuasca Vine
Tetradic +90° +180° +270°
- 1D5C83
Oceanic Motion
- 72436E
≈ Sunset Purple
- 7A491B
≈ Russet
- 2C643B
≈ Fairway Green
Contrast & accessibility
Ag
AAAOn white
WCAG 7.21:1 · APCA Lc 85
Ag
FailOn black
WCAG 2.91:1 · APCA Lc 17
Best text color: #FFFFFF
WCAG 7.21:1 (AAA) · APCA Lc 85
Contrast pairs
Code snippets
CSS
:root {
--oceanic-motion: #1d5c83;
--oceanic-motion-rgb: 29 92 131;
--oceanic-motion-oklch: oklch(0.454 0.089 240.5);
}
.element {
color: var(--oceanic-motion);
background-color: hsl(203 64% 31%);
border-color: oklch(0.454 0.089 240.5);
}Tailwind CSS v4
@theme {
--color-oceanic-motion: #1d5c83;
--color-oceanic-motion-50: #e0f9ff;
--color-oceanic-motion-100: #cfecff;
--color-oceanic-motion-200: #b4daf8;
--color-oceanic-motion-300: #8fbde2;
--color-oceanic-motion-400: #6ca6ce;
--color-oceanic-motion-500: #4a8ebb;
--color-oceanic-motion-600: #3f789e;
--color-oceanic-motion-700: #32607f;
--color-oceanic-motion-800: #22475e;
--color-oceanic-motion-900: #163142;
--color-oceanic-motion-950: #071d2a;
}SCSS
$oceanic-motion: #1d5c83;
$oceanic-motion-rgb: 29, 92, 131;
$oceanic-motion-light: mix(#fff, $oceanic-motion, 20%);
$oceanic-motion-dark: mix(#000, $oceanic-motion, 20%);
.element {
color: $oceanic-motion;
box-shadow: 0 0 0 2px rgba($oceanic-motion, 0.35);
}