Old Study

CSS

:root {
  --old-study: #431705;
  --old-study-rgb: 67 23 5;
  --old-study-oklch: oklch(0.27 0.074 41.3);
}

.element {
  color: var(--old-study);
  background-color: hsl(17 86% 14%);
  border-color: oklch(0.27 0.074 41.3);
}

Tailwind CSS v4

@theme {
  --color-old-study: #431705;
  --color-old-study-50: #ffefe5;
  --color-old-study-100: #fee1d5;
  --color-old-study-200: #f1cbbb;
  --color-old-study-300: #d9ac9a;
  --color-old-study-400: #c5907d;
  --color-old-study-500: #b07660;
  --color-old-study-600: #956451;
  --color-old-study-700: #775041;
  --color-old-study-800: #593a2f;
  --color-old-study-900: #3e2720;
  --color-old-study-950: #27150f;
}

SCSS

$old-study: #431705;
$old-study-rgb: 67, 23, 5;
$old-study-light: mix(#fff, $old-study, 20%);
$old-study-dark: mix(#000, $old-study, 20%);

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