Obstinate Orange

CSS

:root {
  --obstinate-orange: #d7552a;
  --obstinate-orange-rgb: 215 85 42;
  --obstinate-orange-oklch: oklch(0.614 0.173 37.9);
}

.element {
  color: var(--obstinate-orange);
  background-color: hsl(15 68% 50%);
  border-color: oklch(0.614 0.173 37.9);
}

Tailwind CSS v4

@theme {
  --color-obstinate-orange: #d7552a;
  --color-obstinate-orange-50: #ffe5d0;
  --color-obstinate-orange-100: #ffd5bd;
  --color-obstinate-orange-200: #ffbb9c;
  --color-obstinate-orange-300: #ff9771;
  --color-obstinate-orange-400: #f2744d;
  --color-obstinate-orange-500: #e04f1a;
  --color-obstinate-orange-600: #bd441a;
  --color-obstinate-orange-700: #983615;
  --color-obstinate-orange-800: #722610;
  --color-obstinate-orange-900: #50190a;
  --color-obstinate-orange-950: #350901;
}

SCSS

$obstinate-orange: #d7552a;
$obstinate-orange-rgb: 215, 85, 42;
$obstinate-orange-light: mix(#fff, $obstinate-orange, 20%);
$obstinate-orange-dark: mix(#000, $obstinate-orange, 20%);

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