Volcanic

CSS

:root {
  --volcanic: #a55749;
  --volcanic-rgb: 165 87 73;
  --volcanic-oklch: oklch(0.546 0.106 31.4);
}

.element {
  color: var(--volcanic);
  background-color: hsl(9 39% 47%);
  border-color: oklch(0.546 0.106 31.4);
}

Tailwind CSS v4

@theme {
  --color-volcanic: #a55749;
  --color-volcanic-50: #ffebe2;
  --color-volcanic-100: #ffdcd1;
  --color-volcanic-200: #fec5b7;
  --color-volcanic-300: #e8a494;
  --color-volcanic-400: #d58677;
  --color-volcanic-500: #c26959;
  --color-volcanic-600: #a45a4c;
  --color-volcanic-700: #84483d;
  --color-volcanic-800: #62332c;
  --color-volcanic-900: #45231e;
  --color-volcanic-950: #2c120e;
}

SCSS

$volcanic: #a55749;
$volcanic-rgb: 165, 87, 73;
$volcanic-light: mix(#fff, $volcanic, 20%);
$volcanic-dark: mix(#000, $volcanic, 20%);

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