Alfajor Brown

CSS

:root {
  --alfajor-brown: #a55232;
  --alfajor-brown-rgb: 165 82 50;
  --alfajor-brown-oklch: oklch(0.534 0.119 41.1);
}

.element {
  color: var(--alfajor-brown);
  background-color: hsl(17 53% 42%);
  border-color: oklch(0.534 0.119 41.1);
}

Tailwind CSS v4

@theme {
  --color-alfajor-brown: #a55232;
  --color-alfajor-brown-50: #ffebdb;
  --color-alfajor-brown-100: #ffdcc9;
  --color-alfajor-brown-200: #ffc4ac;
  --color-alfajor-brown-300: #eba486;
  --color-alfajor-brown-400: #da8666;
  --color-alfajor-brown-500: #c66844;
  --color-alfajor-brown-600: #a8583a;
  --color-alfajor-brown-700: #87472e;
  --color-alfajor-brown-800: #643222;
  --color-alfajor-brown-900: #472216;
  --color-alfajor-brown-950: #2e1107;
}

SCSS

$alfajor-brown: #a55232;
$alfajor-brown-rgb: 165, 82, 50;
$alfajor-brown-light: mix(#fff, $alfajor-brown, 20%);
$alfajor-brown-dark: mix(#000, $alfajor-brown, 20%);

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