Eye of Newt

CSS

:root {
  --eye-of-newt: #ae3d3b;
  --eye-of-newt-rgb: 174 61 59;
  --eye-of-newt-oklch: oklch(0.52 0.148 24.8);
}

.element {
  color: var(--eye-of-newt);
  background-color: hsl(1 49% 46%);
  border-color: oklch(0.52 0.148 24.8);
}

Tailwind CSS v4

@theme {
  --color-eye-of-newt: #ae3d3b;
  --color-eye-of-newt-50: #ffe6df;
  --color-eye-of-newt-100: #ffd6ce;
  --color-eye-of-newt-200: #ffbcb2;
  --color-eye-of-newt-300: #fa998e;
  --color-eye-of-newt-400: #e97871;
  --color-eye-of-newt-500: #d75652;
  --color-eye-of-newt-600: #b54a46;
  --color-eye-of-newt-700: #923b38;
  --color-eye-of-newt-800: #6d2929;
  --color-eye-of-newt-900: #4d1c1c;
  --color-eye-of-newt-950: #320b0c;
}

SCSS

$eye-of-newt: #ae3d3b;
$eye-of-newt-rgb: 174, 61, 59;
$eye-of-newt-light: mix(#fff, $eye-of-newt, 20%);
$eye-of-newt-dark: mix(#000, $eye-of-newt, 20%);

.element {
  color: $eye-of-newt;
  box-shadow: 0 0 0 2px rgba($eye-of-newt, 0.35);
}