Dark Reaper

CSS

:root {
  --dark-reaper: #3b5150;
  --dark-reaper-rgb: 59 81 80;
  --dark-reaper-oklch: oklch(0.416 0.027 192.7);
}

.element {
  color: var(--dark-reaper);
  background-color: hsl(177 16% 27%);
  border-color: oklch(0.416 0.027 192.7);
}

Tailwind CSS v4

@theme {
  --color-dark-reaper: #3b5150;
  --color-dark-reaper-50: #edf8f7;
  --color-dark-reaper-100: #deebea;
  --color-dark-reaper-200: #c8d8d8;
  --color-dark-reaper-300: #a8bcbb;
  --color-dark-reaper-400: #8da4a3;
  --color-dark-reaper-500: #728c8b;
  --color-dark-reaper-600: #617775;
  --color-dark-reaper-700: #4d5f5e;
  --color-dark-reaper-800: #384644;
  --color-dark-reaper-900: #26302f;
  --color-dark-reaper-950: #151c1c;
}

SCSS

$dark-reaper: #3b5150;
$dark-reaper-rgb: 59, 81, 80;
$dark-reaper-light: mix(#fff, $dark-reaper, 20%);
$dark-reaper-dark: mix(#000, $dark-reaper, 20%);

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