Black Howl

CSS

:root {
  --black-howl: #202030;
  --black-howl-rgb: 32 32 48;
  --black-howl-oklch: oklch(0.251 0.03 284);
}

.element {
  color: var(--black-howl);
  background-color: hsl(240 20% 16%);
  border-color: oklch(0.251 0.03 284);
}

Tailwind CSS v4

@theme {
  --color-black-howl: #202030;
  --color-black-howl-50: #f4f4fe;
  --color-black-howl-100: #e7e7f2;
  --color-black-howl-200: #d3d3e1;
  --color-black-howl-300: #b6b5c7;
  --color-black-howl-400: #9c9cb0;
  --color-black-howl-500: #83849a;
  --color-black-howl-600: #6f7082;
  --color-black-howl-700: #595968;
  --color-black-howl-800: #40414d;
  --color-black-howl-900: #2c2d35;
  --color-black-howl-950: #191a21;
}

SCSS

$black-howl: #202030;
$black-howl-rgb: 32, 32, 48;
$black-howl-light: mix(#fff, $black-howl, 20%);
$black-howl-dark: mix(#000, $black-howl, 20%);

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