Orange Ochre

CSS

:root {
  --orange-ochre: #da7631;
  --orange-ochre-rgb: 218 118 49;
  --orange-ochre-oklch: oklch(0.668 0.148 51.5);
}

.element {
  color: var(--orange-ochre);
  background-color: hsl(24 70% 52%);
  border-color: oklch(0.668 0.148 51.5);
}

Tailwind CSS v4

@theme {
  --color-orange-ochre: #da7631;
  --color-orange-ochre-50: #ffebce;
  --color-orange-ochre-100: #ffdbba;
  --color-orange-ochre-200: #ffc398;
  --color-orange-ochre-300: #f3a26c;
  --color-orange-ochre-400: #e28244;
  --color-orange-ochre-500: #d06300;
  --color-orange-ochre-600: #af5404;
  --color-orange-ochre-700: #8d4306;
  --color-orange-ochre-800: #692f06;
  --color-orange-ochre-900: #4a2005;
  --color-orange-ochre-950: #310f00;
}

SCSS

$orange-ochre: #da7631;
$orange-ochre-rgb: 218, 118, 49;
$orange-ochre-light: mix(#fff, $orange-ochre, 20%);
$orange-ochre-dark: mix(#000, $orange-ochre, 20%);

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