Named color · #71818C
Oyster Bay
Oyster Bay is #71818C: rgb(113 129 140), hsl(204 11% 50%), oklch(0.594 0.025 237.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Oyster Bay color name →
#71818C
oklch(0.594 0.025 237.9)
Color conversions
- HEX
- #71818c
- RGB
- rgb(113 129 140)
- HSL
- hsl(204 11% 50%)
- HWB
- hwb(204 44% 45%)
- OKLCH
- oklch(0.594 0.025 237.9)
- OKLab
- oklab(0.594 -0.013 -0.021)
- CIE Lab
- lab(52.95 -4.18 -8.04)
- LCH
- lch(52.95 9.07 242.5)
- CMYK
- cmyk(19% 8% 0% 45%)
Tints · Shades · Tones
Tints
- 7E8D97
- 8C99A2
- 9AA5AD
- A8B2B9
- B6BEC4
- C4CBD0
- D2D8DB
- E1E5E7
- F0F2F3
Shades
- 616F79
- 525E67
- 434E55
- 353E43
- 272E33
- 1A1F23
- 0E1214
- 040607
- 010101
Tones
- 73818B
- 74818A
- 768188
- 778187
- 798186
- 7A8085
- 7C8084
- 7D8082
- 7F8081
Color harmonies
Complementary +180°
- 71818C
Oyster Bay
- 8A7B70
≈ Road Less-Travelled
Analogous -30° +30°
- 71818C
Oyster Bay
- 6E8386
≈ Trooper
- 787E8E
≈ Seattle Haze
Triadic +120° +240°
- 71818C
Oyster Bay
- 8C787E
≈ Purple Rubiate
- 7D8170
≈ Kakadu Trail
Split-complementary +150° +210°
- 71818C
Oyster Bay
- 8D7976
≈ Venus Deva
- 857E6E
≈ Adaptive Shade
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 4.02:1 · APCA Lc 68
Ag
AAOn black
WCAG 5.22:1 · APCA Lc 34
Best text color: #000000
WCAG 5.22:1 (AA) · APCA Lc 34
Contrast pairs
Code snippets
CSS
:root {
--oyster-bay: #71818c;
--oyster-bay-rgb: 113 129 140;
--oyster-bay-oklch: oklch(0.594 0.025 237.9);
}
.element {
color: var(--oyster-bay);
background-color: hsl(204 11% 50%);
border-color: oklch(0.594 0.025 237.9);
}Tailwind CSS v4
@theme {
--color-oyster-bay: #71818c;
--color-oyster-bay-50: #eff6fc;
--color-oyster-bay-100: #e1e9f0;
--color-oyster-bay-200: #cbd6de;
--color-oyster-bay-300: #acb9c3;
--color-oyster-bay-400: #91a1ac;
--color-oyster-bay-500: #778995;
--color-oyster-bay-600: #65747e;
--color-oyster-bay-700: #515d65;
--color-oyster-bay-800: #3a444a;
--color-oyster-bay-900: #282f33;
--color-oyster-bay-950: #161b1f;
}SCSS
$oyster-bay: #71818c;
$oyster-bay-rgb: 113, 129, 140;
$oyster-bay-light: mix(#fff, $oyster-bay, 20%);
$oyster-bay-dark: mix(#000, $oyster-bay, 20%);
.element {
color: $oyster-bay;
box-shadow: 0 0 0 2px rgba($oyster-bay, 0.35);
}