Yellow Polka Dot

CSS

:root {
  --yellow-polka-dot: #fcb867;
  --yellow-polka-dot-rgb: 252 184 103;
  --yellow-polka-dot-oklch: oklch(0.83 0.126 69.4);
}

.element {
  color: var(--yellow-polka-dot);
  background-color: hsl(33 96% 70%);
  border-color: oklch(0.83 0.126 69.4);
}

Tailwind CSS v4

@theme {
  --color-yellow-polka-dot: #fcb867;
  --color-yellow-polka-dot-50: #fff0cf;
  --color-yellow-polka-dot-100: #ffe2bb;
  --color-yellow-polka-dot-200: #f7cc99;
  --color-yellow-polka-dot-300: #e0ad6d;
  --color-yellow-polka-dot-400: #ce9043;
  --color-yellow-polka-dot-500: #ba7400;
  --color-yellow-polka-dot-600: #9d6301;
  --color-yellow-polka-dot-700: #7e4f04;
  --color-yellow-polka-dot-800: #5f3803;
  --color-yellow-polka-dot-900: #422703;
  --color-yellow-polka-dot-950: #2a1500;
}

SCSS

$yellow-polka-dot: #fcb867;
$yellow-polka-dot-rgb: 252, 184, 103;
$yellow-polka-dot-light: mix(#fff, $yellow-polka-dot, 20%);
$yellow-polka-dot-dark: mix(#000, $yellow-polka-dot, 20%);

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