Dried Goldenrod

CSS

:root {
  --dried-goldenrod: #e2a829;
  --dried-goldenrod-rgb: 226 168 41;
  --dried-goldenrod-oklch: oklch(0.766 0.147 81.5);
}

.element {
  color: var(--dried-goldenrod);
  background-color: hsl(41 76% 52%);
  border-color: oklch(0.766 0.147 81.5);
}

Tailwind CSS v4

@theme {
  --color-dried-goldenrod: #e2a829;
  --color-dried-goldenrod-50: #fff2c6;
  --color-dried-goldenrod-100: #ffe4b0;
  --color-dried-goldenrod-200: #f3cf8a;
  --color-dried-goldenrod-300: #dbb058;
  --color-dried-goldenrod-400: #ca9415;
  --color-dried-goldenrod-500: #b67800;
  --color-dried-goldenrod-600: #9a6600;
  --color-dried-goldenrod-700: #7c5200;
  --color-dried-goldenrod-800: #5d3b00;
  --color-dried-goldenrod-900: #412800;
  --color-dried-goldenrod-950: #291600;
}

SCSS

$dried-goldenrod: #e2a829;
$dried-goldenrod-rgb: 226, 168, 41;
$dried-goldenrod-light: mix(#fff, $dried-goldenrod, 20%);
$dried-goldenrod-dark: mix(#000, $dried-goldenrod, 20%);

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