Old Brown Crayon

CSS

:root {
  --old-brown-crayon: #330000;
  --old-brown-crayon-rgb: 51 0 0;
  --old-brown-crayon-oklch: oklch(0.202 0.083 29.2);
}

.element {
  color: var(--old-brown-crayon);
  background-color: hsl(0 100% 10%);
  border-color: oklch(0.202 0.083 29.2);
}

Tailwind CSS v4

@theme {
  --color-old-brown-crayon: #330000;
  --color-old-brown-crayon-50: #ffede7;
  --color-old-brown-crayon-100: #ffded7;
  --color-old-brown-crayon-200: #f6c8bf;
  --color-old-brown-crayon-300: #dfa89e;
  --color-old-brown-crayon-400: #cb8c82;
  --color-old-brown-crayon-500: #b77166;
  --color-old-brown-crayon-600: #9a6057;
  --color-old-brown-crayon-700: #7c4c45;
  --color-old-brown-crayon-800: #5c3733;
  --color-old-brown-crayon-900: #402622;
  --color-old-brown-crayon-950: #291412;
}

SCSS

$old-brown-crayon: #330000;
$old-brown-crayon-rgb: 51, 0, 0;
$old-brown-crayon-light: mix(#fff, $old-brown-crayon, 20%);
$old-brown-crayon-dark: mix(#000, $old-brown-crayon, 20%);

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