Purple Sphinx

CSS

:root {
  --purple-sphinx: #563948;
  --purple-sphinx-rgb: 86 57 72;
  --purple-sphinx-oklch: oklch(0.383 0.047 347.2);
}

.element {
  color: var(--purple-sphinx);
  background-color: hsl(329 20% 28%);
  border-color: oklch(0.383 0.047 347.2);
}

Tailwind CSS v4

@theme {
  --color-purple-sphinx: #563948;
  --color-purple-sphinx-50: #fff0f7;
  --color-purple-sphinx-100: #f5e2ea;
  --color-purple-sphinx-200: #e5cdd7;
  --color-purple-sphinx-300: #cbaebb;
  --color-purple-sphinx-400: #b494a4;
  --color-purple-sphinx-500: #9e7a8c;
  --color-purple-sphinx-600: #866776;
  --color-purple-sphinx-700: #6b525f;
  --color-purple-sphinx-800: #4f3c46;
  --color-purple-sphinx-900: #372930;
  --color-purple-sphinx-950: #22171d;
}

SCSS

$purple-sphinx: #563948;
$purple-sphinx-rgb: 86, 57, 72;
$purple-sphinx-light: mix(#fff, $purple-sphinx, 20%);
$purple-sphinx-dark: mix(#000, $purple-sphinx, 20%);

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