Pop of Poppy

CSS

:root {
  --pop-of-poppy: #a13741;
  --pop-of-poppy-rgb: 161 55 65;
  --pop-of-poppy-oklch: oklch(0.492 0.14 18.5);
}

.element {
  color: var(--pop-of-poppy);
  background-color: hsl(354 49% 42%);
  border-color: oklch(0.492 0.14 18.5);
}

Tailwind CSS v4

@theme {
  --color-pop-of-poppy: #a13741;
  --color-pop-of-poppy-50: #ffe6e4;
  --color-pop-of-poppy-100: #ffd6d4;
  --color-pop-of-poppy-200: #ffbdbb;
  --color-pop-of-poppy-300: #f79a99;
  --color-pop-of-poppy-400: #e57a7e;
  --color-pop-of-poppy-500: #d25961;
  --color-pop-of-poppy-600: #b24c53;
  --color-pop-of-poppy-700: #8f3c42;
  --color-pop-of-poppy-800: #6a2b31;
  --color-pop-of-poppy-900: #4b1d21;
  --color-pop-of-poppy-950: #310c11;
}

SCSS

$pop-of-poppy: #a13741;
$pop-of-poppy-rgb: 161, 55, 65;
$pop-of-poppy-light: mix(#fff, $pop-of-poppy, 20%);
$pop-of-poppy-dark: mix(#000, $pop-of-poppy, 20%);

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