Nocturnal Flight

CSS

:root {
  --nocturnal-flight: #675754;
  --nocturnal-flight-rgb: 103 87 84;
  --nocturnal-flight-oklch: oklch(0.472 0.022 30.4);
}

.element {
  color: var(--nocturnal-flight);
  background-color: hsl(9 10% 37%);
  border-color: oklch(0.472 0.022 30.4);
}

Tailwind CSS v4

@theme {
  --color-nocturnal-flight: #675754;
  --color-nocturnal-flight-50: #fbf3f1;
  --color-nocturnal-flight-100: #efe5e3;
  --color-nocturnal-flight-200: #ddd1ce;
  --color-nocturnal-flight-300: #c2b4b0;
  --color-nocturnal-flight-400: #ab9a97;
  --color-nocturnal-flight-500: #94817e;
  --color-nocturnal-flight-600: #7d6d6a;
  --color-nocturnal-flight-700: #645755;
  --color-nocturnal-flight-800: #4a403e;
  --color-nocturnal-flight-900: #332c2b;
  --color-nocturnal-flight-950: #1f1918;
}

SCSS

$nocturnal-flight: #675754;
$nocturnal-flight-rgb: 103, 87, 84;
$nocturnal-flight-light: mix(#fff, $nocturnal-flight, 20%);
$nocturnal-flight-dark: mix(#000, $nocturnal-flight, 20%);

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