Hello Yellow

CSS

:root {
  --hello-yellow: #ffe59d;
  --hello-yellow-rgb: 255 229 157;
  --hello-yellow-oklch: oklch(0.927 0.095 90.4);
}

.element {
  color: var(--hello-yellow);
  background-color: hsl(44 100% 81%);
  border-color: oklch(0.927 0.095 90.4);
}

Tailwind CSS v4

@theme {
  --color-hello-yellow: #ffe59d;
  --color-hello-yellow-50: #fff5d7;
  --color-hello-yellow-100: #f3e8c5;
  --color-hello-yellow-200: #e2d4a7;
  --color-hello-yellow-300: #c8b77f;
  --color-hello-yellow-400: #b49c5a;
  --color-hello-yellow-500: #9e8332;
  --color-hello-yellow-600: #866f2c;
  --color-hello-yellow-700: #6b5923;
  --color-hello-yellow-800: #504017;
  --color-hello-yellow-900: #382c0f;
  --color-hello-yellow-950: #221903;
}

SCSS

$hello-yellow: #ffe59d;
$hello-yellow-rgb: 255, 229, 157;
$hello-yellow-light: mix(#fff, $hello-yellow, 20%);
$hello-yellow-dark: mix(#000, $hello-yellow, 20%);

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