Wild Primrose

CSS

:root {
  --wild-primrose: #ebdd99;
  --wild-primrose-rgb: 235 221 153;
  --wild-primrose-oklch: oklch(0.893 0.088 97.9);
}

.element {
  color: var(--wild-primrose);
  background-color: hsl(50 67% 76%);
  border-color: oklch(0.893 0.088 97.9);
}

Tailwind CSS v4

@theme {
  --color-wild-primrose: #ebdd99;
  --color-wild-primrose-50: #fbf6da;
  --color-wild-primrose-100: #eee9c8;
  --color-wild-primrose-200: #ddd6ab;
  --color-wild-primrose-300: #c2b985;
  --color-wild-primrose-400: #ac9f61;
  --color-wild-primrose-500: #96873c;
  --color-wild-primrose-600: #7f7234;
  --color-wild-primrose-700: #655b29;
  --color-wild-primrose-800: #4b421c;
  --color-wild-primrose-900: #342e12;
  --color-wild-primrose-950: #201a05;
}

SCSS

$wild-primrose: #ebdd99;
$wild-primrose-rgb: 235, 221, 153;
$wild-primrose-light: mix(#fff, $wild-primrose, 20%);
$wild-primrose-dark: mix(#000, $wild-primrose, 20%);

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