Inside

CSS

:root {
  --inside: #221122;
  --inside-rgb: 34 17 34;
  --inside-oklch: oklch(0.21 0.041 326.9);
}

.element {
  color: var(--inside);
  background-color: hsl(300 33% 10%);
  border-color: oklch(0.21 0.041 326.9);
}

Tailwind CSS v4

@theme {
  --color-inside: #221122;
  --color-inside-50: #fcf1fb;
  --color-inside-100: #f0e3ef;
  --color-inside-200: #dfcedd;
  --color-inside-300: #c4b0c2;
  --color-inside-400: #ac96ab;
  --color-inside-500: #957d95;
  --color-inside-600: #7e6a7e;
  --color-inside-700: #655565;
  --color-inside-800: #4a3e4a;
  --color-inside-900: #332a34;
  --color-inside-950: #1f181f;
}

SCSS

$inside: #221122;
$inside-rgb: 34, 17, 34;
$inside-light: mix(#fff, $inside, 20%);
$inside-dark: mix(#000, $inside, 20%);

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