Total Recall

CSS

:root {
  --total-recall: #f6ead8;
  --total-recall-rgb: 246 234 216;
  --total-recall-oklch: oklch(0.942 0.027 78.2);
}

.element {
  color: var(--total-recall);
  background-color: hsl(36 63% 91%);
  border-color: oklch(0.942 0.027 78.2);
}

Tailwind CSS v4

@theme {
  --color-total-recall: #f6ead8;
  --color-total-recall-50: #f9f4ed;
  --color-total-recall-100: #ede7de;
  --color-total-recall-200: #dad3c8;
  --color-total-recall-300: #bfb6a8;
  --color-total-recall-400: #a79d8d;
  --color-total-recall-500: #908472;
  --color-total-recall-600: #7a7061;
  --color-total-recall-700: #625a4d;
  --color-total-recall-800: #484138;
  --color-total-recall-900: #322d26;
  --color-total-recall-950: #1e1a15;
}

SCSS

$total-recall: #f6ead8;
$total-recall-rgb: 246, 234, 216;
$total-recall-light: mix(#fff, $total-recall, 20%);
$total-recall-dark: mix(#000, $total-recall, 20%);

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