Yell for Yellow

CSS

:root {
  --yell-for-yellow: #fffe00;
  --yell-for-yellow-rgb: 255 254 0;
  --yell-for-yellow-oklch: oklch(0.966 0.21 109.5);
}

.element {
  color: var(--yell-for-yellow);
  background-color: hsl(60 100% 50%);
  border-color: oklch(0.966 0.21 109.5);
}

Tailwind CSS v4

@theme {
  --color-yell-for-yellow: #fffe00;
  --color-yell-for-yellow-50: #f7fcb6;
  --color-yell-for-yellow-100: #eaef9c;
  --color-yell-for-yellow-200: #d7dd6c;
  --color-yell-for-yellow-300: #bcc115;
  --color-yell-for-yellow-400: #a9a600;
  --color-yell-for-yellow-500: #948c00;
  --color-yell-for-yellow-600: #7d7700;
  --color-yell-for-yellow-700: #645f00;
  --color-yell-for-yellow-800: #4c4500;
  --color-yell-for-yellow-900: #353000;
  --color-yell-for-yellow-950: #201c00;
}

SCSS

$yell-for-yellow: #fffe00;
$yell-for-yellow-rgb: 255, 254, 0;
$yell-for-yellow-light: mix(#fff, $yell-for-yellow, 20%);
$yell-for-yellow-dark: mix(#000, $yell-for-yellow, 20%);

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