Reign of Tomatoes

CSS

:root {
  --reign-of-tomatoes: #f7250b;
  --reign-of-tomatoes-rgb: 247 37 11;
  --reign-of-tomatoes-oklch: oklch(0.624 0.241 30.6);
}

.element {
  color: var(--reign-of-tomatoes);
  background-color: hsl(7 94% 51%);
  border-color: oklch(0.624 0.241 30.6);
}

Tailwind CSS v4

@theme {
  --color-reign-of-tomatoes: #f7250b;
  --color-reign-of-tomatoes-50: #ffdcc9;
  --color-reign-of-tomatoes-100: #ffcab4;
  --color-reign-of-tomatoes-200: #ffab91;
  --color-reign-of-tomatoes-300: #ff8062;
  --color-reign-of-tomatoes-400: #ff5139;
  --color-reign-of-tomatoes-500: #ff0000;
  --color-reign-of-tomatoes-600: #d70000;
  --color-reign-of-tomatoes-700: #ad0200;
  --color-reign-of-tomatoes-800: #820002;
  --color-reign-of-tomatoes-900: #5c0202;
  --color-reign-of-tomatoes-950: #3e0000;
}

SCSS

$reign-of-tomatoes: #f7250b;
$reign-of-tomatoes-rgb: 247, 37, 11;
$reign-of-tomatoes-light: mix(#fff, $reign-of-tomatoes, 20%);
$reign-of-tomatoes-dark: mix(#000, $reign-of-tomatoes, 20%);

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