Named color · #758F9A
Sheltered Bay
Sheltered Bay is #758F9A: rgb(117 143 154), hsl(198 15% 53%), oklch(0.634 0.034 225.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Sheltered Bay color name →
#758F9A
oklch(0.634 0.034 225.4)
Color conversions
- HEX
- #758f9a
- RGB
- rgb(117 143 154)
- HSL
- hsl(198 15% 53%)
- HWB
- hwb(198 46% 40%)
- OKLCH
- oklch(0.634 0.034 225.4)
- OKLab
- oklab(0.634 -0.024 -0.024)
- CIE Lab
- lab(57.66 -7.61 -9.07)
- LCH
- lch(57.66 11.85 230)
- CMYK
- cmyk(24% 7% 0% 40%)
Tints · Shades · Tones
Tints
- 829AA4
- 8FA5AE
- 9DAFB7
- AABAC1
- B8C6CB
- C6D1D6
- D4DCE0
- E2E8EA
- F1F3F5
Shades
- 657C85
- 556971
- 46575E
- 37454B
- 293439
- 1C2427
- 0F1517
- 050709
- 010101
Tones
- 768E97
- 778C95
- 798B92
- 7A8990
- 7B888D
- 7C868A
- 7D8588
- 7E8385
- 7F8283
Color harmonies
Complementary +180°
- 758F9A
Sheltered Bay
- 9D847A
≈ Antique Bear
Analogous -30° +30°
- 758F9A
Sheltered Bay
- 739191
≈ Juniper
- 7D8C9F
≈ Lucid Blue
Triadic +120° +240°
- 758F9A
Sheltered Bay
- 9A828F
≈ Garden Plum
- 8D8C74
≈ Epic Green
Split-complementary +150° +210°
- 758F9A
Sheltered Bay
- 9E8283
≈ Plumville
- 978874
≈ Shipwreck
Tetradic +90° +180° +270°
- 758F9A
Sheltered Bay
- 928499
≈ Hatoba Pigeon
- 9D847A
≈ Antique Bear
- 818F7B
≈ Ginkgo Tree
Contrast & accessibility
Ag
FailOn white
WCAG 3.41:1 · APCA Lc 62
Ag
AAOn black
WCAG 6.15:1 · APCA Lc 40
Best text color: #000000
WCAG 6.15:1 (AA) · APCA Lc 40
Contrast pairs
Code snippets
CSS
:root {
--sheltered-bay: #758f9a;
--sheltered-bay-rgb: 117 143 154;
--sheltered-bay-oklch: oklch(0.634 0.034 225.4);
}
.element {
color: var(--sheltered-bay);
background-color: hsl(198 15% 53%);
border-color: oklch(0.634 0.034 225.4);
}Tailwind CSS v4
@theme {
--color-sheltered-bay: #758f9a;
--color-sheltered-bay-50: #ecf7fd;
--color-sheltered-bay-100: #ddeaf1;
--color-sheltered-bay-200: #c6d7e0;
--color-sheltered-bay-300: #a6bbc5;
--color-sheltered-bay-400: #8aa3ae;
--color-sheltered-bay-500: #6f8b97;
--color-sheltered-bay-600: #5e7680;
--color-sheltered-bay-700: #4b5e66;
--color-sheltered-bay-800: #36454b;
--color-sheltered-bay-900: #253034;
--color-sheltered-bay-950: #131c20;
}SCSS
$sheltered-bay: #758f9a;
$sheltered-bay-rgb: 117, 143, 154;
$sheltered-bay-light: mix(#fff, $sheltered-bay, 20%);
$sheltered-bay-dark: mix(#000, $sheltered-bay, 20%);
.element {
color: $sheltered-bay;
box-shadow: 0 0 0 2px rgba($sheltered-bay, 0.35);
}