Crushed Orange

CSS

:root {
  --crushed-orange: #e37730;
  --crushed-orange-rgb: 227 119 48;
  --crushed-orange-oklch: oklch(0.681 0.157 50);
}

.element {
  color: var(--crushed-orange);
  background-color: hsl(24 76% 54%);
  border-color: oklch(0.681 0.157 50);
}

Tailwind CSS v4

@theme {
  --color-crushed-orange: #e37730;
  --color-crushed-orange-50: #ffeacd;
  --color-crushed-orange-100: #ffdab8;
  --color-crushed-orange-200: #ffc296;
  --color-crushed-orange-300: #f69f69;
  --color-crushed-orange-400: #e67f3f;
  --color-crushed-orange-500: #d45f00;
  --color-crushed-orange-600: #b35100;
  --color-crushed-orange-700: #904100;
  --color-crushed-orange-800: #6c2d02;
  --color-crushed-orange-900: #4c1f03;
  --color-crushed-orange-950: #320e00;
}

SCSS

$crushed-orange: #e37730;
$crushed-orange-rgb: 227, 119, 48;
$crushed-orange-light: mix(#fff, $crushed-orange, 20%);
$crushed-orange-dark: mix(#000, $crushed-orange, 20%);

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