Halcyon Days

CSS

:root {
  --halcyon-days: #f7bb73;
  --halcyon-days-rgb: 247 187 115;
  --halcyon-days-oklch: oklch(0.832 0.113 70.3);
}

.element {
  color: var(--halcyon-days);
  background-color: hsl(33 89% 71%);
  border-color: oklch(0.832 0.113 70.3);
}

Tailwind CSS v4

@theme {
  --color-halcyon-days: #f7bb73;
  --color-halcyon-days-50: #fff1d2;
  --color-halcyon-days-100: #ffe3bf;
  --color-halcyon-days-200: #f3cd9f;
  --color-halcyon-days-300: #dbae76;
  --color-halcyon-days-400: #c9924f;
  --color-halcyon-days-500: #b5771d;
  --color-halcyon-days-600: #99651c;
  --color-halcyon-days-700: #7b5117;
  --color-halcyon-days-800: #5c3a0f;
  --color-halcyon-days-900: #402809;
  --color-halcyon-days-950: #291600;
}

SCSS

$halcyon-days: #f7bb73;
$halcyon-days-rgb: 247, 187, 115;
$halcyon-days-light: mix(#fff, $halcyon-days, 20%);
$halcyon-days-dark: mix(#000, $halcyon-days, 20%);

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