Yellow Canary

CSS

:root {
  --yellow-canary: #ffeaac;
  --yellow-canary-rgb: 255 234 172;
  --yellow-canary-oklch: oklch(0.94 0.082 91.6);
}

.element {
  color: var(--yellow-canary);
  background-color: hsl(45 100% 84%);
  border-color: oklch(0.94 0.082 91.6);
}

Tailwind CSS v4

@theme {
  --color-yellow-canary: #ffeaac;
  --color-yellow-canary-50: #fdf5db;
  --color-yellow-canary-100: #f1e8ca;
  --color-yellow-canary-200: #e0d4ad;
  --color-yellow-canary-300: #c5b787;
  --color-yellow-canary-400: #b09d65;
  --color-yellow-canary-500: #9a8442;
  --color-yellow-canary-600: #827039;
  --color-yellow-canary-700: #685a2d;
  --color-yellow-canary-800: #4e411f;
  --color-yellow-canary-900: #362d14;
  --color-yellow-canary-950: #211a06;
}

SCSS

$yellow-canary: #ffeaac;
$yellow-canary-rgb: 255, 234, 172;
$yellow-canary-light: mix(#fff, $yellow-canary, 20%);
$yellow-canary-dark: mix(#000, $yellow-canary, 20%);

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