New Yellow

CSS

:root {
  --new-yellow: #e8c247;
  --new-yellow-rgb: 232 194 71;
  --new-yellow-oklch: oklch(0.826 0.144 91.5);
}

.element {
  color: var(--new-yellow);
  background-color: hsl(46 78% 59%);
  border-color: oklch(0.826 0.144 91.5);
}

Tailwind CSS v4

@theme {
  --color-new-yellow: #e8c247;
  --color-new-yellow-50: #fff5c7;
  --color-new-yellow-100: #f8e8b2;
  --color-new-yellow-200: #e9d48c;
  --color-new-yellow-300: #d0b65b;
  --color-new-yellow-400: #bd9a1c;
  --color-new-yellow-500: #a98000;
  --color-new-yellow-600: #8f6d00;
  --color-new-yellow-700: #725700;
  --color-new-yellow-800: #563f00;
  --color-new-yellow-900: #3c2b00;
  --color-new-yellow-950: #261800;
}

SCSS

$new-yellow: #e8c247;
$new-yellow-rgb: 232, 194, 71;
$new-yellow-light: mix(#fff, $new-yellow, 20%);
$new-yellow-dark: mix(#000, $new-yellow, 20%);

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