Lionfish Red

CSS

:root {
  --lionfish-red: #e03c28;
  --lionfish-red-rgb: 224 60 40;
  --lionfish-red-oklch: oklch(0.601 0.204 30.6);
}

.element {
  color: var(--lionfish-red);
  background-color: hsl(7 75% 52%);
  border-color: oklch(0.601 0.204 30.6);
}

Tailwind CSS v4

@theme {
  --color-lionfish-red: #e03c28;
  --color-lionfish-red-50: #ffe1d0;
  --color-lionfish-red-100: #ffcfbd;
  --color-lionfish-red-200: #ffb39c;
  --color-lionfish-red-300: #ff8c72;
  --color-lionfish-red-400: #ff644e;
  --color-lionfish-red-500: #ef341f;
  --color-lionfish-red-600: #ca2f1d;
  --color-lionfish-red-700: #a22617;
  --color-lionfish-red-800: #7a1913;
  --color-lionfish-red-900: #56100c;
  --color-lionfish-red-950: #390201;
}

SCSS

$lionfish-red: #e03c28;
$lionfish-red-rgb: 224, 60, 40;
$lionfish-red-light: mix(#fff, $lionfish-red, 20%);
$lionfish-red-dark: mix(#000, $lionfish-red, 20%);

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