Husky Orange

CSS

:root {
  --husky-orange: #bb613e;
  --husky-orange-rgb: 187 97 62;
  --husky-orange-oklch: oklch(0.592 0.126 41.4);
}

.element {
  color: var(--husky-orange);
  background-color: hsl(17 50% 49%);
  border-color: oklch(0.592 0.126 41.4);
}

Tailwind CSS v4

@theme {
  --color-husky-orange: #bb613e;
  --color-husky-orange-50: #ffead9;
  --color-husky-orange-100: #ffdbc7;
  --color-husky-orange-200: #ffc3a9;
  --color-husky-orange-300: #eea283;
  --color-husky-orange-400: #dd8462;
  --color-husky-orange-500: #ca653e;
  --color-husky-orange-600: #aa5636;
  --color-husky-orange-700: #89452a;
  --color-husky-orange-800: #66311f;
  --color-husky-orange-900: #482114;
  --color-husky-orange-950: #2f1006;
}

SCSS

$husky-orange: #bb613e;
$husky-orange-rgb: 187, 97, 62;
$husky-orange-light: mix(#fff, $husky-orange, 20%);
$husky-orange-dark: mix(#000, $husky-orange, 20%);

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