The First Daffodil

CSS

:root {
  --the-first-daffodil: #fff08c;
  --the-first-daffodil-rgb: 255 240 140;
  --the-first-daffodil-oklch: oklch(0.946 0.122 100.9);
}

.element {
  color: var(--the-first-daffodil);
  background-color: hsl(52 100% 77%);
  border-color: oklch(0.946 0.122 100.9);
}

Tailwind CSS v4

@theme {
  --color-the-first-daffodil: #fff08c;
  --color-the-first-daffodil-50: #fbf7cf;
  --color-the-first-daffodil-100: #efeabb;
  --color-the-first-daffodil-200: #ddd79a;
  --color-the-first-daffodil-300: #c3ba6e;
  --color-the-first-daffodil-400: #aea041;
  --color-the-first-daffodil-500: #988700;
  --color-the-first-daffodil-600: #817300;
  --color-the-first-daffodil-700: #675c00;
  --color-the-first-daffodil-800: #4d4200;
  --color-the-first-daffodil-900: #362e01;
  --color-the-first-daffodil-950: #211a00;
}

SCSS

$the-first-daffodil: #fff08c;
$the-first-daffodil-rgb: 255, 240, 140;
$the-first-daffodil-light: mix(#fff, $the-first-daffodil, 20%);
$the-first-daffodil-dark: mix(#000, $the-first-daffodil, 20%);

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