Volcanic Blast

CSS

:root {
  --volcanic-blast: #e15835;
  --volcanic-blast-rgb: 225 88 53;
  --volcanic-blast-oklch: oklch(0.634 0.178 35.3);
}

.element {
  color: var(--volcanic-blast);
  background-color: hsl(12 74% 55%);
  border-color: oklch(0.634 0.178 35.3);
}

Tailwind CSS v4

@theme {
  --color-volcanic-blast: #e15835;
  --color-volcanic-blast-50: #ffe4d1;
  --color-volcanic-blast-100: #ffd4be;
  --color-volcanic-blast-200: #ffb99d;
  --color-volcanic-blast-300: #ff9473;
  --color-volcanic-blast-400: #f57150;
  --color-volcanic-blast-500: #e34a21;
  --color-volcanic-blast-600: #c0401f;
  --color-volcanic-blast-700: #9a3318;
  --color-volcanic-blast-800: #732313;
  --color-volcanic-blast-900: #52180c;
  --color-volcanic-blast-950: #360701;
}

SCSS

$volcanic-blast: #e15835;
$volcanic-blast-rgb: 225, 88, 53;
$volcanic-blast-light: mix(#fff, $volcanic-blast, 20%);
$volcanic-blast-dark: mix(#000, $volcanic-blast, 20%);

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