Pupil

CSS

:root {
  --pupil: #070303;
  --pupil-rgb: 7 3 3;
  --pupil-oklch: oklch(0.107 0.012 19.3);
}

.element {
  color: var(--pupil);
  background-color: hsl(0 40% 2%);
  border-color: oklch(0.107 0.012 19.3);
}

Tailwind CSS v4

@theme {
  --color-pupil: #070303;
  --color-pupil-50: #f9f4f3;
  --color-pupil-100: #ece6e6;
  --color-pupil-200: #d9d2d2;
  --color-pupil-300: #bdb5b5;
  --color-pupil-400: #a59c9b;
  --color-pupil-500: #8e8383;
  --color-pupil-600: #786f6f;
  --color-pupil-700: #605959;
  --color-pupil-800: #464141;
  --color-pupil-900: #312d2d;
  --color-pupil-950: #1d1a1a;
}

SCSS

$pupil: #070303;
$pupil-rgb: 7, 3, 3;
$pupil-light: mix(#fff, $pupil, 20%);
$pupil-dark: mix(#000, $pupil, 20%);

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