Named color · #378FB3
Navagio Bay
Navagio Bay is #378FB3: rgb(55 143 179), hsl(197 53% 46%), oklch(0.613 0.099 228.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Navagio Bay color name →
#378FB3
oklch(0.613 0.099 228.8)
Color conversions
- HEX
- #378fb3
- RGB
- rgb(55 143 179)
- HSL
- hsl(197 53% 46%)
- HWB
- hwb(197 22% 30%)
- OKLCH
- oklch(0.613 0.099 228.8)
- OKLab
- oklab(0.613 -0.065 -0.074)
- CIE Lab
- lab(55.35 -18.17 -27.12)
- LCH
- lch(55.35 32.65 236.2)
- CMYK
- cmyk(69% 20% 0% 30%)
Tints · Shades · Tones
Tints
- 4F9ABB
- 65A5C2
- 79B0CA
- 8CBBD2
- A0C7D9
- B3D2E1
- C6DDE9
- D9E8F0
- ECF4F8
Shades
- 2E7C9B
- 266984
- 1E576E
- 164558
- 0F3443
- 08242F
- 03151D
- 01070C
- 000101
Tones
- 428EAE
- 4C8CA9
- 558BA4
- 5C8A9F
- 63889A
- 6A8795
- 708590
- 75848A
- 7B8285
Color harmonies
Complementary +180°
- 378FB3
Navagio Bay
- B4714D
≈ Not yet Caramel
Analogous -30° +30°
- 378FB3
Navagio Bay
- 1C969A
≈ Sea Fantasy
- 5F85BF
≈ Havelock Blue
Triadic +120° +240°
- 378FB3
Navagio Bay
- B06B8E
≈ Purple Starburst
- 89893D
≈ Witch Brew
Split-complementary +150° +210°
- 378FB3
Navagio Bay
- B86B6D
≈ Exotic Incense
- A47C38
≈ Fluor Spar
Tetradic +90° +180° +270°
- 378FB3
Navagio Bay
- 9D70AA
≈ Dark Lilac
- B4714D
≈ Not yet Caramel
- 659258
≈ Irish Charm
Contrast & accessibility
Ag
FailOn white
WCAG 3.65:1 · APCA Lc 64
Ag
AAOn black
WCAG 5.74:1 · APCA Lc 38
Best text color: #000000
WCAG 5.74:1 (AA) · APCA Lc 38
Contrast pairs
Code snippets
CSS
:root {
--navagio-bay: #378fb3;
--navagio-bay-rgb: 55 143 179;
--navagio-bay-oklch: oklch(0.613 0.099 228.8);
}
.element {
color: var(--navagio-bay);
background-color: hsl(197 53% 46%);
border-color: oklch(0.613 0.099 228.8);
}Tailwind CSS v4
@theme {
--color-navagio-bay: #378fb3;
--color-navagio-bay-50: #dafbff;
--color-navagio-bay-100: #c8efff;
--color-navagio-bay-200: #aaddf7;
--color-navagio-bay-300: #82c1e1;
--color-navagio-bay-400: #5aaacd;
--color-navagio-bay-500: #2b92ba;
--color-navagio-bay-600: #277c9d;
--color-navagio-bay-700: #1f637e;
--color-navagio-bay-800: #12495d;
--color-navagio-bay-900: #0c3341;
--color-navagio-bay-950: #001e2a;
}SCSS
$navagio-bay: #378fb3;
$navagio-bay-rgb: 55, 143, 179;
$navagio-bay-light: mix(#fff, $navagio-bay, 20%);
$navagio-bay-dark: mix(#000, $navagio-bay, 20%);
.element {
color: $navagio-bay;
box-shadow: 0 0 0 2px rgba($navagio-bay, 0.35);
}