Twinkling Lights

CSS

:root {
  --twinkling-lights: #fffac1;
  --twinkling-lights-rgb: 255 250 193;
  --twinkling-lights-oklch: oklch(0.975 0.073 103.5);
}

.element {
  color: var(--twinkling-lights);
  background-color: hsl(55 100% 88%);
  border-color: oklch(0.975 0.073 103.5);
}

Tailwind CSS v4

@theme {
  --color-twinkling-lights: #fffac1;
  --color-twinkling-lights-50: #f8f7df;
  --color-twinkling-lights-100: #ebeace;
  --color-twinkling-lights-200: #d8d7b3;
  --color-twinkling-lights-300: #bcba8f;
  --color-twinkling-lights-400: #a6a16e;
  --color-twinkling-lights-500: #8e894d;
  --color-twinkling-lights-600: #787442;
  --color-twinkling-lights-700: #605c35;
  --color-twinkling-lights-800: #484325;
  --color-twinkling-lights-900: #322e18;
  --color-twinkling-lights-950: #1e1b09;
}

SCSS

$twinkling-lights: #fffac1;
$twinkling-lights-rgb: 255, 250, 193;
$twinkling-lights-light: mix(#fff, $twinkling-lights, 20%);
$twinkling-lights-dark: mix(#000, $twinkling-lights, 20%);

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