Orange Shot

CSS

:root {
  --orange-shot: #dd7744;
  --orange-shot-rgb: 221 119 68;
  --orange-shot-oklch: oklch(0.675 0.143 45.8);
}

.element {
  color: var(--orange-shot);
  background-color: hsl(20 69% 57%);
  border-color: oklch(0.675 0.143 45.8);
}

Tailwind CSS v4

@theme {
  --color-orange-shot: #dd7744;
  --color-orange-shot-50: #ffead2;
  --color-orange-shot-100: #ffdabf;
  --color-orange-shot-200: #ffc29f;
  --color-orange-shot-300: #f3a076;
  --color-orange-shot-400: #e28151;
  --color-orange-shot-500: #d06123;
  --color-orange-shot-600: #b05321;
  --color-orange-shot-700: #8d421a;
  --color-orange-shot-800: #6a2f13;
  --color-orange-shot-900: #4a200c;
  --color-orange-shot-950: #310f01;
}

SCSS

$orange-shot: #dd7744;
$orange-shot-rgb: 221, 119, 68;
$orange-shot-light: mix(#fff, $orange-shot, 20%);
$orange-shot-dark: mix(#000, $orange-shot, 20%);

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