Sunset in Italy

CSS

:root {
  --sunset-in-italy: #f0c484;
  --sunset-in-italy-rgb: 240 196 132;
  --sunset-in-italy-oklch: oklch(0.845 0.096 76.2);
}

.element {
  color: var(--sunset-in-italy);
  background-color: hsl(36 78% 73%);
  border-color: oklch(0.845 0.096 76.2);
}

Tailwind CSS v4

@theme {
  --color-sunset-in-italy: #f0c484;
  --color-sunset-in-italy-50: #fff3d7;
  --color-sunset-in-italy-100: #fae5c5;
  --color-sunset-in-italy-200: #ebd0a7;
  --color-sunset-in-italy-300: #d2b27f;
  --color-sunset-in-italy-400: #bf975b;
  --color-sunset-in-italy-500: #aa7d34;
  --color-sunset-in-italy-600: #906a2e;
  --color-sunset-in-italy-700: #735524;
  --color-sunset-in-italy-800: #563d19;
  --color-sunset-in-italy-900: #3c2a10;
  --color-sunset-in-italy-950: #261703;
}

SCSS

$sunset-in-italy: #f0c484;
$sunset-in-italy-rgb: 240, 196, 132;
$sunset-in-italy-light: mix(#fff, $sunset-in-italy, 20%);
$sunset-in-italy-dark: mix(#000, $sunset-in-italy, 20%);

.element {
  color: $sunset-in-italy;
  box-shadow: 0 0 0 2px rgba($sunset-in-italy, 0.35);
}