Red Radish

CSS

:root {
  --red-radish: #ee3344;
  --red-radish-rgb: 238 51 68;
  --red-radish-oklch: oklch(0.621 0.22 22.3);
}

.element {
  color: var(--red-radish);
  background-color: hsl(355 85% 57%);
  border-color: oklch(0.621 0.22 22.3);
}

Tailwind CSS v4

@theme {
  --color-red-radish: #ee3344;
  --color-red-radish-50: #ffddd6;
  --color-red-radish-100: #ffcbc4;
  --color-red-radish-200: #ffada5;
  --color-red-radish-300: #ff847e;
  --color-red-radish-400: #ff595f;
  --color-red-radish-500: #f6173b;
  --color-red-radish-600: #d01b33;
  --color-red-radish-700: #a71728;
  --color-red-radish-800: #7d0d1f;
  --color-red-radish-900: #590915;
  --color-red-radish-950: #3b0006;
}

SCSS

$red-radish: #ee3344;
$red-radish-rgb: 238, 51, 68;
$red-radish-light: mix(#fff, $red-radish, 20%);
$red-radish-dark: mix(#000, $red-radish, 20%);

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