Named color · #445780
Sailor
Sailor is #445780: rgb(68 87 128), hsl(221 31% 38%), oklch(0.459 0.071 264.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Sailor color name →
#445780
oklch(0.459 0.071 264.7)
Color conversions
- HEX
- #445780
- RGB
- rgb(68 87 128)
- HSL
- hsl(221 31% 38%)
- HWB
- hwb(221 27% 50%)
- OKLCH
- oklch(0.459 0.071 264.7)
- OKLab
- oklab(0.459 -0.007 -0.071)
- CIE Lab
- lab(36.79 1.57 -25.74)
- LCH
- lch(36.79 25.79 273.5)
- CMYK
- cmyk(47% 32% 0% 50%)
Tints · Shades · Tones
Tints
- 55678C
- 667799
- 7887A6
- 8A97B2
- 9DA8BF
- B0B9CC
- C3CAD8
- D7DBE5
- EBEDF2
Shades
- 3A4B6E
- 303E5D
- 26334D
- 1D273D
- 141C2E
- 0C121F
- 050812
- 020306
- 000001
Tones
- 4A5B80
- 505F81
- 566481
- 5C6881
- 616C81
- 687081
- 6E7481
- 747881
- 7A7C80
Color harmonies
Complementary +180°
- 445780
Sailor
- 6A5425
≈ Field Drab
Analogous -30° +30°
Triadic +120° +240°
- 445780
Sailor
- 7B4744
≈ Tuscan Red
- 3E623E
≈ Cupidity
Split-complementary +150° +210°
- 445780
Sailor
- 774D2F
≈ Walnut Wood
- 575C2B
≈ Saratoga
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 7.18:1 · APCA Lc 85
Ag
FailOn black
WCAG 2.92:1 · APCA Lc 17
Best text color: #FFFFFF
WCAG 7.18:1 (AAA) · APCA Lc 85
Contrast pairs
Code snippets
CSS
:root {
--sailor: #445780;
--sailor-rgb: 68 87 128;
--sailor-oklch: oklch(0.459 0.071 264.7);
}
.element {
color: var(--sailor);
background-color: hsl(221 31% 38%);
border-color: oklch(0.459 0.071 264.7);
}Tailwind CSS v4
@theme {
--color-sailor: #445780;
--color-sailor-50: #ecf5ff;
--color-sailor-100: #dde8ff;
--color-sailor-200: #c6d4f4;
--color-sailor-300: #a7b7dd;
--color-sailor-400: #8a9ec9;
--color-sailor-500: #6f86b6;
--color-sailor-600: #5e719a;
--color-sailor-700: #4b5a7b;
--color-sailor-800: #35425b;
--color-sailor-900: #242e40;
--color-sailor-950: #131b29;
}SCSS
$sailor: #445780;
$sailor-rgb: 68, 87, 128;
$sailor-light: mix(#fff, $sailor, 20%);
$sailor-dark: mix(#000, $sailor, 20%);
.element {
color: $sailor;
box-shadow: 0 0 0 2px rgba($sailor, 0.35);
}