Medium Goldenrod

CSS

:root {
  --medium-goldenrod: #eaeaae;
  --medium-goldenrod-rgb: 234 234 174;
  --medium-goldenrod-oklch: oklch(0.923 0.077 107.8);
}

.element {
  color: var(--medium-goldenrod);
  background-color: hsl(60 59% 80%);
  border-color: oklch(0.923 0.077 107.8);
}

Tailwind CSS v4

@theme {
  --color-medium-goldenrod: #eaeaae;
  --color-medium-goldenrod-50: #f6f8de;
  --color-medium-goldenrod-100: #e9ebcd;
  --color-medium-goldenrod-200: #d6d8b2;
  --color-medium-goldenrod-300: #b9bb8e;
  --color-medium-goldenrod-400: #a3a26c;
  --color-medium-goldenrod-500: #8b8a4b;
  --color-medium-goldenrod-600: #767540;
  --color-medium-goldenrod-700: #5e5d33;
  --color-medium-goldenrod-800: #464423;
  --color-medium-goldenrod-900: #302f17;
  --color-medium-goldenrod-950: #1d1b08;
}

SCSS

$medium-goldenrod: #eaeaae;
$medium-goldenrod-rgb: 234, 234, 174;
$medium-goldenrod-light: mix(#fff, $medium-goldenrod, 20%);
$medium-goldenrod-dark: mix(#000, $medium-goldenrod, 20%);

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