Volcanic Unrest

CSS

:root {
  --volcanic-unrest: #be462f;
  --volcanic-unrest-rgb: 190 70 47;
  --volcanic-unrest-oklch: oklch(0.555 0.159 32.9);
}

.element {
  color: var(--volcanic-unrest);
  background-color: hsl(10 60% 46%);
  border-color: oklch(0.555 0.159 32.9);
}

Tailwind CSS v4

@theme {
  --color-volcanic-unrest: #be462f;
  --color-volcanic-unrest-50: #ffe6d7;
  --color-volcanic-unrest-100: #ffd6c4;
  --color-volcanic-unrest-200: #ffbca6;
  --color-volcanic-unrest-300: #fd987f;
  --color-volcanic-unrest-400: #ed775f;
  --color-volcanic-unrest-500: #db543a;
  --color-volcanic-unrest-600: #b94832;
  --color-volcanic-unrest-700: #953928;
  --color-volcanic-unrest-800: #6f281d;
  --color-volcanic-unrest-900: #4e1b13;
  --color-volcanic-unrest-950: #340a05;
}

SCSS

$volcanic-unrest: #be462f;
$volcanic-unrest-rgb: 190, 70, 47;
$volcanic-unrest-light: mix(#fff, $volcanic-unrest, 20%);
$volcanic-unrest-dark: mix(#000, $volcanic-unrest, 20%);

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