Wild Daffodil

CSS

:root {
  --wild-daffodil: #f4d967;
  --wild-daffodil-rgb: 244 217 103;
  --wild-daffodil-oklch: oklch(0.886 0.137 96.1);
}

.element {
  color: var(--wild-daffodil);
  background-color: hsl(49 87% 68%);
  border-color: oklch(0.886 0.137 96.1);
}

Tailwind CSS v4

@theme {
  --color-wild-daffodil: #f4d967;
  --color-wild-daffodil-50: #fff6ca;
  --color-wild-daffodil-100: #f4e9b5;
  --color-wild-daffodil-200: #e3d591;
  --color-wild-daffodil-300: #cab862;
  --color-wild-daffodil-400: #b69d2c;
  --color-wild-daffodil-500: #a18400;
  --color-wild-daffodil-600: #887000;
  --color-wild-daffodil-700: #6d5900;
  --color-wild-daffodil-800: #524100;
  --color-wild-daffodil-900: #392d00;
  --color-wild-daffodil-950: #231900;
}

SCSS

$wild-daffodil: #f4d967;
$wild-daffodil-rgb: 244, 217, 103;
$wild-daffodil-light: mix(#fff, $wild-daffodil, 20%);
$wild-daffodil-dark: mix(#000, $wild-daffodil, 20%);

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