Pale Daffodil

CSS

:root {
  --pale-daffodil: #fde89a;
  --pale-daffodil-rgb: 253 232 154;
  --pale-daffodil-oklch: oklch(0.931 0.1 94.8);
}

.element {
  color: var(--pale-daffodil);
  background-color: hsl(47 96% 80%);
  border-color: oklch(0.931 0.1 94.8);
}

Tailwind CSS v4

@theme {
  --color-pale-daffodil: #fde89a;
  --color-pale-daffodil-50: #fdf6d6;
  --color-pale-daffodil-100: #f1e9c3;
  --color-pale-daffodil-200: #e0d5a4;
  --color-pale-daffodil-300: #c6b87c;
  --color-pale-daffodil-400: #b19e56;
  --color-pale-daffodil-500: #9b852b;
  --color-pale-daffodil-600: #837127;
  --color-pale-daffodil-700: #695a1f;
  --color-pale-daffodil-800: #4e4114;
  --color-pale-daffodil-900: #362d0c;
  --color-pale-daffodil-950: #211a01;
}

SCSS

$pale-daffodil: #fde89a;
$pale-daffodil-rgb: 253, 232, 154;
$pale-daffodil-light: mix(#fff, $pale-daffodil, 20%);
$pale-daffodil-dark: mix(#000, $pale-daffodil, 20%);

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