Kalliene Yellow

CSS

:root {
  --kalliene-yellow: #b59808;
  --kalliene-yellow-rgb: 181 152 8;
  --kalliene-yellow-oklch: oklch(0.686 0.139 95.1);
}

.element {
  color: var(--kalliene-yellow);
  background-color: hsl(50 92% 37%);
  border-color: oklch(0.686 0.139 95.1);
}

Tailwind CSS v4

@theme {
  --color-kalliene-yellow: #b59808;
  --color-kalliene-yellow-50: #fff6c9;
  --color-kalliene-yellow-100: #f5e9b4;
  --color-kalliene-yellow-200: #e5d58f;
  --color-kalliene-yellow-300: #cbb85f;
  --color-kalliene-yellow-400: #b89d26;
  --color-kalliene-yellow-500: #a38300;
  --color-kalliene-yellow-600: #8a6f00;
  --color-kalliene-yellow-700: #6e5900;
  --color-kalliene-yellow-800: #534000;
  --color-kalliene-yellow-900: #3a2c00;
  --color-kalliene-yellow-950: #241900;
}

SCSS

$kalliene-yellow: #b59808;
$kalliene-yellow-rgb: 181, 152, 8;
$kalliene-yellow-light: mix(#fff, $kalliene-yellow, 20%);
$kalliene-yellow-dark: mix(#000, $kalliene-yellow, 20%);

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