Caramelised Orange

CSS

:root {
  --caramelised-orange: #ef924a;
  --caramelised-orange-rgb: 239 146 74;
  --caramelised-orange-oklch: oklch(0.744 0.142 55.9);
}

.element {
  color: var(--caramelised-orange);
  background-color: hsl(26 84% 61%);
  border-color: oklch(0.744 0.142 55.9);
}

Tailwind CSS v4

@theme {
  --color-caramelised-orange: #ef924a;
  --color-caramelised-orange-50: #ffecce;
  --color-caramelised-orange-100: #ffddba;
  --color-caramelised-orange-200: #ffc698;
  --color-caramelised-orange-300: #eea56c;
  --color-caramelised-orange-400: #dd8642;
  --color-caramelised-orange-500: #ca6800;
  --color-caramelised-orange-600: #ab5800;
  --color-caramelised-orange-700: #894603;
  --color-caramelised-orange-800: #673204;
  --color-caramelised-orange-900: #482204;
  --color-caramelised-orange-950: #2f1100;
}

SCSS

$caramelised-orange: #ef924a;
$caramelised-orange-rgb: 239, 146, 74;
$caramelised-orange-light: mix(#fff, $caramelised-orange, 20%);
$caramelised-orange-dark: mix(#000, $caramelised-orange, 20%);

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