Carrot Stick

CSS

:root {
  --carrot-stick: #df7836;
  --carrot-stick-rgb: 223 120 54;
  --carrot-stick-oklch: oklch(0.678 0.15 50.1);
}

.element {
  color: var(--carrot-stick);
  background-color: hsl(23 73% 54%);
  border-color: oklch(0.678 0.15 50.1);
}

Tailwind CSS v4

@theme {
  --color-carrot-stick: #df7836;
  --color-carrot-stick-50: #ffeace;
  --color-carrot-stick-100: #ffdbba;
  --color-carrot-stick-200: #ffc399;
  --color-carrot-stick-300: #f4a16d;
  --color-carrot-stick-400: #e38145;
  --color-carrot-stick-500: #d16100;
  --color-carrot-stick-600: #b15307;
  --color-carrot-stick-700: #8e4208;
  --color-carrot-stick-800: #6a2f07;
  --color-carrot-stick-900: #4b2005;
  --color-carrot-stick-950: #310f00;
}

SCSS

$carrot-stick: #df7836;
$carrot-stick-rgb: 223, 120, 54;
$carrot-stick-light: mix(#fff, $carrot-stick, 20%);
$carrot-stick-dark: mix(#000, $carrot-stick, 20%);

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