Bitter Orange

CSS

:root {
  --bitter-orange: #d5762b;
  --bitter-orange-rgb: 213 118 43;
  --bitter-orange-oklch: oklch(0.66 0.146 54.3);
}

.element {
  color: var(--bitter-orange);
  background-color: hsl(26 67% 50%);
  border-color: oklch(0.66 0.146 54.3);
}

Tailwind CSS v4

@theme {
  --color-bitter-orange: #d5762b;
  --color-bitter-orange-50: #ffebce;
  --color-bitter-orange-100: #ffdcb9;
  --color-bitter-orange-200: #ffc597;
  --color-bitter-orange-300: #f0a36b;
  --color-bitter-orange-400: #df8441;
  --color-bitter-orange-500: #cd6500;
  --color-bitter-orange-600: #ad5600;
  --color-bitter-orange-700: #8b4502;
  --color-bitter-orange-800: #683103;
  --color-bitter-orange-900: #492103;
  --color-bitter-orange-950: #301000;
}

SCSS

$bitter-orange: #d5762b;
$bitter-orange-rgb: 213, 118, 43;
$bitter-orange-light: mix(#fff, $bitter-orange, 20%);
$bitter-orange-dark: mix(#000, $bitter-orange, 20%);

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