Goldenrod Yellow

CSS

:root {
  --goldenrod-yellow: #ffce8f;
  --goldenrod-yellow-rgb: 255 206 143;
  --goldenrod-yellow-oklch: oklch(0.88 0.097 73);
}

.element {
  color: var(--goldenrod-yellow);
  background-color: hsl(34 100% 78%);
  border-color: oklch(0.88 0.097 73);
}

Tailwind CSS v4

@theme {
  --color-goldenrod-yellow: #ffce8f;
  --color-goldenrod-yellow-50: #fff2d7;
  --color-goldenrod-yellow-100: #fbe4c5;
  --color-goldenrod-yellow-200: #edcfa7;
  --color-goldenrod-yellow-300: #d5b17f;
  --color-goldenrod-yellow-400: #c1955b;
  --color-goldenrod-yellow-500: #ad7b34;
  --color-goldenrod-yellow-600: #92682d;
  --color-goldenrod-yellow-700: #755324;
  --color-goldenrod-yellow-800: #573c19;
  --color-goldenrod-yellow-900: #3d2910;
  --color-goldenrod-yellow-950: #261703;
}

SCSS

$goldenrod-yellow: #ffce8f;
$goldenrod-yellow-rgb: 255, 206, 143;
$goldenrod-yellow-light: mix(#fff, $goldenrod-yellow, 20%);
$goldenrod-yellow-dark: mix(#000, $goldenrod-yellow, 20%);

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