Squash

CSS

:root {
  --squash: #f2ab15;
  --squash-rgb: 242 171 21;
  --squash-oklch: oklch(0.789 0.161 77.9);
}

.element {
  color: var(--squash);
  background-color: hsl(41 89% 52%);
  border-color: oklch(0.789 0.161 77.9);
}

Tailwind CSS v4

@theme {
  --color-squash: #f2ab15;
  --color-squash-50: #fff1c2;
  --color-squash-100: #ffe3ab;
  --color-squash-200: #f9cd83;
  --color-squash-300: #e2ad4c;
  --color-squash-400: #d29000;
  --color-squash-500: #bf7300;
  --color-squash-600: #a16200;
  --color-squash-700: #814e00;
  --color-squash-800: #613800;
  --color-squash-900: #442600;
  --color-squash-950: #2c1400;
}

SCSS

$squash: #f2ab15;
$squash-rgb: 242, 171, 21;
$squash-light: mix(#fff, $squash, 20%);
$squash-dark: mix(#000, $squash, 20%);

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