Named color · #204D68
Seafarer
Seafarer is #204D68: rgb(32 77 104), hsl(203 53% 27%), oklch(0.402 0.067 238). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Seafarer color name →
#204D68
oklch(0.402 0.067 238)
Color conversions
- HEX
- #204d68
- RGB
- rgb(32 77 104)
- HSL
- hsl(203 53% 27%)
- HWB
- hwb(203 13% 59%)
- OKLCH
- oklch(0.402 0.067 238)
- OKLab
- oklab(0.402 -0.035 -0.057)
- CIE Lab
- lab(30.59 -8.74 -20.66)
- LCH
- lch(30.59 22.43 247.1)
- CMYK
- cmyk(69% 26% 0% 59%)
Tints · Shades · Tones
Tints
- 365D76
- 4B6E85
- 617F94
- 7691A2
- 8CA2B1
- A2B4C1
- B9C6D0
- D0D9E0
- E7ECEF
Shades
- 1A4259
- 15374B
- 0F2C3E
- 0A2230
- 061824
- 030F18
- 01070C
- 000204
- 000000
Tones
- 2B526B
- 35576D
- 3F5C70
- 496272
- 526775
- 5B6C77
- 647179
- 6E767C
- 777B7E
Color harmonies
Complementary +180°
- 204D68
Seafarer
- 633E21
≈ Cassiterite Brown
Analogous -30° +30°
- 204D68
Seafarer
- 06525B
≈ Blue Period
- 39466D
≈ Starlit Night
Triadic +120° +240°
- 204D68
Seafarer
- 653848
≈ High Priest
- 454D20
≈ Bronze Tone
Split-complementary +150° +210°
- 204D68
Seafarer
- 683933
≈ Hot Chocolate
- 574618
≈ Mud Brown
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 9.04:1 · APCA Lc 91
Ag
FailOn black
WCAG 2.32:1 · APCA Lc 12
Best text color: #FFFFFF
WCAG 9.04:1 (AAA) · APCA Lc 91
Contrast pairs
Code snippets
CSS
:root {
--seafarer: #204d68;
--seafarer-rgb: 32 77 104;
--seafarer-oklch: oklch(0.402 0.067 238);
}
.element {
color: var(--seafarer);
background-color: hsl(203 53% 27%);
border-color: oklch(0.402 0.067 238);
}Tailwind CSS v4
@theme {
--color-seafarer: #204d68;
--color-seafarer-50: #e5f8ff;
--color-seafarer-100: #d5ecfd;
--color-seafarer-200: #bbd9ef;
--color-seafarer-300: #99bdd7;
--color-seafarer-400: #79a5c2;
--color-seafarer-500: #5a8dae;
--color-seafarer-600: #4d7793;
--color-seafarer-700: #3d5f76;
--color-seafarer-800: #2b4657;
--color-seafarer-900: #1d313c;
--color-seafarer-950: #0d1d26;
}SCSS
$seafarer: #204d68;
$seafarer-rgb: 32, 77, 104;
$seafarer-light: mix(#fff, $seafarer, 20%);
$seafarer-dark: mix(#000, $seafarer, 20%);
.element {
color: $seafarer;
box-shadow: 0 0 0 2px rgba($seafarer, 0.35);
}