Red Gumball

CSS

:root {
  --red-gumball: #ac3a3e;
  --red-gumball-rgb: 172 58 62;
  --red-gumball-oklch: oklch(0.513 0.149 22.1);
}

.element {
  color: var(--red-gumball);
  background-color: hsl(358 50% 45%);
  border-color: oklch(0.513 0.149 22.1);
}

Tailwind CSS v4

@theme {
  --color-red-gumball: #ac3a3e;
  --color-red-gumball-50: #ffe5e0;
  --color-red-gumball-100: #ffd5d0;
  --color-red-gumball-200: #ffbcb5;
  --color-red-gumball-300: #fb9892;
  --color-red-gumball-400: #e97776;
  --color-red-gumball-500: #d75557;
  --color-red-gumball-600: #b6494a;
  --color-red-gumball-700: #923a3b;
  --color-red-gumball-800: #6d292c;
  --color-red-gumball-900: #4d1c1e;
  --color-red-gumball-950: #320b0e;
}

SCSS

$red-gumball: #ac3a3e;
$red-gumball-rgb: 172, 58, 62;
$red-gumball-light: mix(#fff, $red-gumball, 20%);
$red-gumball-dark: mix(#000, $red-gumball, 20%);

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