Orange Slice

CSS

:root {
  --orange-slice: #f4915c;
  --orange-slice-rgb: 244 145 92;
  --orange-slice-oklch: oklch(0.751 0.138 47.9);
}

.element {
  color: var(--orange-slice);
  background-color: hsl(21 87% 66%);
  border-color: oklch(0.751 0.138 47.9);
}

Tailwind CSS v4

@theme {
  --color-orange-slice: #f4915c;
  --color-orange-slice-50: #ffebd3;
  --color-orange-slice-100: #ffdbbf;
  --color-orange-slice-200: #ffc39f;
  --color-orange-slice-300: #f1a276;
  --color-orange-slice-400: #df8351;
  --color-orange-slice-500: #cd6424;
  --color-orange-slice-600: #ad5521;
  --color-orange-slice-700: #8b441a;
  --color-orange-slice-800: #683013;
  --color-orange-slice-900: #49210c;
  --color-orange-slice-950: #301001;
}

SCSS

$orange-slice: #f4915c;
$orange-slice-rgb: 244, 145, 92;
$orange-slice-light: mix(#fff, $orange-slice, 20%);
$orange-slice-dark: mix(#000, $orange-slice, 20%);

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