Fire Hydrant

CSS

:root {
  --fire-hydrant: #ff0d00;
  --fire-hydrant-rgb: 255 13 0;
  --fire-hydrant-oklch: oklch(0.63 0.255 29.6);
}

.element {
  color: var(--fire-hydrant);
  background-color: hsl(3 100% 50%);
  border-color: oklch(0.63 0.255 29.6);
}

Tailwind CSS v4

@theme {
  --color-fire-hydrant: #ff0d00;
  --color-fire-hydrant-50: #ffdac8;
  --color-fire-hydrant-100: #ffc8b3;
  --color-fire-hydrant-200: #ffa88e;
  --color-fire-hydrant-300: #ff7b5f;
  --color-fire-hydrant-400: #ff4734;
  --color-fire-hydrant-500: #ff0000;
  --color-fire-hydrant-600: #dc0000;
  --color-fire-hydrant-700: #b10000;
  --color-fire-hydrant-800: #850000;
  --color-fire-hydrant-900: #5e0001;
  --color-fire-hydrant-950: #400000;
}

SCSS

$fire-hydrant: #ff0d00;
$fire-hydrant-rgb: 255, 13, 0;
$fire-hydrant-light: mix(#fff, $fire-hydrant, 20%);
$fire-hydrant-dark: mix(#000, $fire-hydrant, 20%);

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