Nearest named color · #217081
#217081
Nearest named color: Ocean’s Embrace
#217081 (rgb(33 112 129), hsl(191 59% 32%), oklch(0.506 0.078 215.3)) is closest to the named color Ocean’s Embrace. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#217081
oklch(0.506 0.078 215.3)
Color conversions
- HEX
- #217081
- RGB
- rgb(33 112 129)
- HSL
- hsl(191 59% 32%)
- HWB
- hwb(191 13% 49%)
- OKLCH
- oklch(0.506 0.078 215.3)
- OKLab
- oklab(0.506 -0.064 -0.045)
- CIE Lab
- lab(43.19 -19.87 -16.7)
- LCH
- lch(43.19 25.95 220)
- CMYK
- cmyk(74% 13% 0% 49%)
Tints · Shades · Tones
Tints
- 3C7E8D
- 538B99
- 6999A6
- 7EA7B2
- 94B6BF
- A9C4CB
- BED3D8
- D3E1E5
- E9F0F2
Shades
- 1B606F
- 16515E
- 10434E
- 0B353E
- 06272E
- 031A1F
- 010E12
- 000406
- 000101
Tones
- 307281
- 3C7481
- 467581
- 4F7781
- 587981
- 617A81
- 697C81
- 717D80
- 787F80
Color harmonies
Complementary +180°
- 217081
Ocean’s Embrace
- 8C5446
≈ Annatto
Analogous -30° +30°
- 217081
Ocean’s Embrace
- 21736B
≈ Advantageous
- 3C698F
≈ Honky Tonk Blue
Triadic +120° +240°
- 217081
Ocean’s Embrace
- 815376
≈ Purple Davenport
- 73642C
≈ Himalaya
Split-complementary +150° +210°
- 217081
Ocean’s Embrace
- 8B515F
≈ Berry Smoothie
- 845B32
≈ Rubber
Tetradic +90° +180° +270°
- 217081
Ocean’s Embrace
- 705989
≈ Emperor Jewel
- 8C5446
≈ Annatto
- 5A6D39
≈ Spring Onion
Contrast & accessibility
Ag
AAOn white
WCAG 5.67:1 · APCA Lc 78
Ag
FailOn black
WCAG 3.69:1 · APCA Lc 24
Best text color: #FFFFFF
WCAG 5.67:1 (AA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--ocean-s-embrace: #217081;
--ocean-s-embrace-rgb: 33 112 129;
--ocean-s-embrace-oklch: oklch(0.506 0.078 215.3);
}
.element {
color: var(--ocean-s-embrace);
background-color: hsl(191 59% 32%);
border-color: oklch(0.506 0.078 215.3);
}Tailwind CSS v4
@theme {
--color-ocean-s-embrace: #217081;
--color-ocean-s-embrace-50: #ddfbff;
--color-ocean-s-embrace-100: #cceff9;
--color-ocean-s-embrace-200: #afddea;
--color-ocean-s-embrace-300: #89c2d2;
--color-ocean-s-embrace-400: #65aabc;
--color-ocean-s-embrace-500: #3e93a7;
--color-ocean-s-embrace-600: #367d8d;
--color-ocean-s-embrace-700: #2b6471;
--color-ocean-s-embrace-800: #1d4953;
--color-ocean-s-embrace-900: #13333a;
--color-ocean-s-embrace-950: #041f24;
}SCSS
$ocean-s-embrace: #217081;
$ocean-s-embrace-rgb: 33, 112, 129;
$ocean-s-embrace-light: mix(#fff, $ocean-s-embrace, 20%);
$ocean-s-embrace-dark: mix(#000, $ocean-s-embrace, 20%);
.element {
color: $ocean-s-embrace;
box-shadow: 0 0 0 2px rgba($ocean-s-embrace, 0.35);
}