Sawtooth Aak

CSS

:root {
  --sawtooth-aak: #ec956c;
  --sawtooth-aak-rgb: 236 149 108;
  --sawtooth-aak-oklch: oklch(0.75 0.119 45.7);
}

.element {
  color: var(--sawtooth-aak);
  background-color: hsl(19 77% 67%);
  border-color: oklch(0.75 0.119 45.7);
}

Tailwind CSS v4

@theme {
  --color-sawtooth-aak: #ec956c;
  --color-sawtooth-aak-50: #ffecd8;
  --color-sawtooth-aak-100: #ffddc6;
  --color-sawtooth-aak-200: #ffc6a9;
  --color-sawtooth-aak-300: #eaa582;
  --color-sawtooth-aak-400: #d88761;
  --color-sawtooth-aak-500: #c56a3c;
  --color-sawtooth-aak-600: #a65a34;
  --color-sawtooth-aak-700: #864829;
  --color-sawtooth-aak-800: #64331e;
  --color-sawtooth-aak-900: #462313;
  --color-sawtooth-aak-950: #2d1206;
}

SCSS

$sawtooth-aak: #ec956c;
$sawtooth-aak-rgb: 236, 149, 108;
$sawtooth-aak-light: mix(#fff, $sawtooth-aak, 20%);
$sawtooth-aak-dark: mix(#000, $sawtooth-aak, 20%);

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