Dithered Amber

CSS

:root {
  --dithered-amber: #feb308;
  --dithered-amber-rgb: 254 179 8;
  --dithered-amber-oklch: oklch(0.817 0.169 78.1);
}

.element {
  color: var(--dithered-amber);
  background-color: hsl(42 99% 51%);
  border-color: oklch(0.817 0.169 78.1);
}

Tailwind CSS v4

@theme {
  --color-dithered-amber: #feb308;
  --color-dithered-amber-50: #fff1bf;
  --color-dithered-amber-100: #ffe2a7;
  --color-dithered-amber-200: #facc7e;
  --color-dithered-amber-300: #e4ad44;
  --color-dithered-amber-400: #d48f00;
  --color-dithered-amber-500: #c17200;
  --color-dithered-amber-600: #a36100;
  --color-dithered-amber-700: #834d00;
  --color-dithered-amber-800: #623700;
  --color-dithered-amber-900: #452600;
  --color-dithered-amber-950: #2d1400;
}

SCSS

$dithered-amber: #feb308;
$dithered-amber-rgb: 254, 179, 8;
$dithered-amber-light: mix(#fff, $dithered-amber, 20%);
$dithered-amber-dark: mix(#000, $dithered-amber, 20%);

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