Nearest named color · #417D89
#417D89
Nearest named color: Mysterious Blue
#417D89 (rgb(65 125 137), hsl(190 36% 40%), oklch(0.554 0.065 212.2)) is closest to the named color Mysterious Blue. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#417D89
oklch(0.554 0.065 212.2)
Color conversions
- HEX
- #417d89
- RGB
- rgb(65 125 137)
- HSL
- hsl(190 36% 40%)
- HWB
- hwb(190 25% 46%)
- OKLCH
- oklch(0.554 0.065 212.2)
- OKLab
- oklab(0.554 -0.055 -0.035)
- CIE Lab
- lab(48.75 -17.68 -12.91)
- LCH
- lch(48.75 21.89 216.1)
- CMYK
- cmyk(53% 9% 0% 46%)
Tints · Shades · Tones
Tints
- 558994
- 6896A0
- 7AA3AB
- 8DAFB7
- A0BCC3
- B2C9CE
- C5D7DA
- D8E4E7
- ECF1F3
Shades
- 376C76
- 2E5B64
- 254B53
- 1C3B42
- 132C31
- 0B1E22
- 051114
- 010507
- 000101
Tones
- 497D88
- 507E87
- 577E86
- 5E7F86
- 647F85
- 6A7F84
- 707F83
- 758082
- 7B8081
Color harmonies
Complementary +180°
- 417D89
Mysterious Blue
- 95655B
≈ Umenezumi Plum
Analogous -30° +30°
- 417D89
Mysterious Blue
- 437F76
≈ Azurite Water Green
- 507896
≈ Beach View
Triadic +120° +240°
- 417D89
Mysterious Blue
- 8A6584
≈ Sunshone Plum
- 807245
≈ Italian Olive
Split-complementary +150° +210°
- 417D89
Mysterious Blue
- 936370
≈ Mauve Taupe
- 8E6A4B
≈ Slippery Stone
Tetradic +90° +180° +270°
- 417D89
Mysterious Blue
- 7A6A93
≈ Arabian Silk
- 95655B
≈ Umenezumi Plum
- 6C794E
≈ Kariyasu Green
Contrast & accessibility
Ag
AAOn white
WCAG 4.64:1 · APCA Lc 72
Ag
AAOn black
WCAG 4.51:1 · APCA Lc 30
Best text color: #FFFFFF
WCAG 4.64:1 (AA) · APCA Lc 72
Contrast pairs
Code snippets
CSS
:root {
--mysterious-blue: #417d89;
--mysterious-blue-rgb: 65 125 137;
--mysterious-blue-oklch: oklch(0.554 0.065 212.2);
}
.element {
color: var(--mysterious-blue);
background-color: hsl(190 36% 40%);
border-color: oklch(0.554 0.065 212.2);
}Tailwind CSS v4
@theme {
--color-mysterious-blue: #417d89;
--color-mysterious-blue-50: #e1faff;
--color-mysterious-blue-100: #d0eef5;
--color-mysterious-blue-200: #b6dce5;
--color-mysterious-blue-300: #92c1cc;
--color-mysterious-blue-400: #70a9b5;
--color-mysterious-blue-500: #4e929f;
--color-mysterious-blue-600: #437b87;
--color-mysterious-blue-700: #35636c;
--color-mysterious-blue-800: #25494f;
--color-mysterious-blue-900: #193237;
--color-mysterious-blue-950: #091e22;
}SCSS
$mysterious-blue: #417d89;
$mysterious-blue-rgb: 65, 125, 137;
$mysterious-blue-light: mix(#fff, $mysterious-blue, 20%);
$mysterious-blue-dark: mix(#000, $mysterious-blue, 20%);
.element {
color: $mysterious-blue;
box-shadow: 0 0 0 2px rgba($mysterious-blue, 0.35);
}