Robust Orange

CSS

:root {
  --robust-orange: #c4633e;
  --robust-orange-rgb: 196 99 62;
  --robust-orange-oklch: oklch(0.608 0.134 40.9);
}

.element {
  color: var(--robust-orange);
  background-color: hsl(17 53% 51%);
  border-color: oklch(0.608 0.134 40.9);
}

Tailwind CSS v4

@theme {
  --color-robust-orange: #c4633e;
  --color-robust-orange-50: #ffead7;
  --color-robust-orange-100: #ffdac5;
  --color-robust-orange-200: #ffc2a7;
  --color-robust-orange-300: #f2a07f;
  --color-robust-orange-400: #e0815e;
  --color-robust-orange-500: #ce6238;
  --color-robust-orange-600: #ae5431;
  --color-robust-orange-700: #8c4327;
  --color-robust-orange-800: #682f1c;
  --color-robust-orange-900: #492012;
  --color-robust-orange-950: #300f05;
}

SCSS

$robust-orange: #c4633e;
$robust-orange-rgb: 196, 99, 62;
$robust-orange-light: mix(#fff, $robust-orange, 20%);
$robust-orange-dark: mix(#000, $robust-orange, 20%);

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