Red Dit

CSS

:root {
  --red-dit: #ff4500;
  --red-dit-rgb: 255 69 0;
  --red-dit-oklch: oklch(0.66 0.229 35.4);
}

.element {
  color: var(--red-dit);
  background-color: hsl(16 100% 50%);
  border-color: oklch(0.66 0.229 35.4);
}

Tailwind CSS v4

@theme {
  --color-red-dit: #ff4500;
  --color-red-dit-50: #ffdfc6;
  --color-red-dit-100: #ffcdb1;
  --color-red-dit-200: #ffaf8c;
  --color-red-dit-300: #ff865b;
  --color-red-dit-400: #ff5b2c;
  --color-red-dit-500: #f91900;
  --color-red-dit-600: #d21c00;
  --color-red-dit-700: #a91800;
  --color-red-dit-800: #7f0d00;
  --color-red-dit-900: #5a0900;
  --color-red-dit-950: #3c0000;
}

SCSS

$red-dit: #ff4500;
$red-dit-rgb: 255, 69, 0;
$red-dit-light: mix(#fff, $red-dit, 20%);
$red-dit-dark: mix(#000, $red-dit, 20%);

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