Kokushoku Black

CSS

:root {
  --kokushoku-black: #171412;
  --kokushoku-black-rgb: 23 20 18;
  --kokushoku-black-oklch: oklch(0.194 0.006 56);
}

.element {
  color: var(--kokushoku-black);
  background-color: hsl(24 12% 8%);
  border-color: oklch(0.194 0.006 56);
}

Tailwind CSS v4

@theme {
  --color-kokushoku-black: #171412;
  --color-kokushoku-black-50: #f6f5f3;
  --color-kokushoku-black-100: #e9e7e6;
  --color-kokushoku-black-200: #d6d3d2;
  --color-kokushoku-black-300: #bab7b4;
  --color-kokushoku-black-400: #a19d9b;
  --color-kokushoku-black-500: #8a8582;
  --color-kokushoku-black-600: #74716e;
  --color-kokushoku-black-700: #5d5a58;
  --color-kokushoku-black-800: #444240;
  --color-kokushoku-black-900: #2f2d2c;
  --color-kokushoku-black-950: #1c1a19;
}

SCSS

$kokushoku-black: #171412;
$kokushoku-black-rgb: 23, 20, 18;
$kokushoku-black-light: mix(#fff, $kokushoku-black, 20%);
$kokushoku-black-dark: mix(#000, $kokushoku-black, 20%);

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