Shearwater Black

CSS

:root {
  --shearwater-black: #5b5b6c;
  --shearwater-black-rgb: 91 91 108;
  --shearwater-black-oklch: oklch(0.477 0.027 285.3);
}

.element {
  color: var(--shearwater-black);
  background-color: hsl(240 9% 39%);
  border-color: oklch(0.477 0.027 285.3);
}

Tailwind CSS v4

@theme {
  --color-shearwater-black: #5b5b6c;
  --color-shearwater-black-50: #f4f4fd;
  --color-shearwater-black-100: #e7e7f1;
  --color-shearwater-black-200: #d3d3e0;
  --color-shearwater-black-300: #b6b6c5;
  --color-shearwater-black-400: #9c9cae;
  --color-shearwater-black-500: #848498;
  --color-shearwater-black-600: #707080;
  --color-shearwater-black-700: #595967;
  --color-shearwater-black-800: #41414c;
  --color-shearwater-black-900: #2d2d35;
  --color-shearwater-black-950: #1a1a20;
}

SCSS

$shearwater-black: #5b5b6c;
$shearwater-black-rgb: 91, 91, 108;
$shearwater-black-light: mix(#fff, $shearwater-black, 20%);
$shearwater-black-dark: mix(#000, $shearwater-black, 20%);

.element {
  color: $shearwater-black;
  box-shadow: 0 0 0 2px rgba($shearwater-black, 0.35);
}