Pinch of Pepper

CSS

:root {
  --pinch-of-pepper: #0f180a;
  --pinch-of-pepper-rgb: 15 24 10;
  --pinch-of-pepper-oklch: oklch(0.195 0.03 135);
}

.element {
  color: var(--pinch-of-pepper);
  background-color: hsl(99 41% 7%);
  border-color: oklch(0.195 0.03 135);
}

Tailwind CSS v4

@theme {
  --color-pinch-of-pepper: #0f180a;
  --color-pinch-of-pepper-50: #f1f7ef;
  --color-pinch-of-pepper-100: #e3eae1;
  --color-pinch-of-pepper-200: #ced7cb;
  --color-pinch-of-pepper-300: #b0bbac;
  --color-pinch-of-pepper-400: #97a391;
  --color-pinch-of-pepper-500: #7e8b77;
  --color-pinch-of-pepper-600: #6b7665;
  --color-pinch-of-pepper-700: #555e51;
  --color-pinch-of-pepper-800: #3e453a;
  --color-pinch-of-pepper-900: #2b3028;
  --color-pinch-of-pepper-950: #181c16;
}

SCSS

$pinch-of-pepper: #0f180a;
$pinch-of-pepper-rgb: 15, 24, 10;
$pinch-of-pepper-light: mix(#fff, $pinch-of-pepper, 20%);
$pinch-of-pepper-dark: mix(#000, $pinch-of-pepper, 20%);

.element {
  color: $pinch-of-pepper;
  box-shadow: 0 0 0 2px rgba($pinch-of-pepper, 0.35);
}