Cheese It Up

CSS

:root {
  --cheese-it-up: #fdde45;
  --cheese-it-up-rgb: 253 222 69;
  --cheese-it-up-oklch: oklch(0.901 0.165 97.3);
}

.element {
  color: var(--cheese-it-up);
  background-color: hsl(50 98% 63%);
  border-color: oklch(0.901 0.165 97.3);
}

Tailwind CSS v4

@theme {
  --color-cheese-it-up: #fdde45;
  --color-cheese-it-up-50: #fff7c0;
  --color-cheese-it-up-100: #f5eaa9;
  --color-cheese-it-up-200: #e5d681;
  --color-cheese-it-up-300: #ccb848;
  --color-cheese-it-up-400: #ba9d00;
  --color-cheese-it-up-500: #a58300;
  --color-cheese-it-up-600: #8c6f00;
  --color-cheese-it-up-700: #705900;
  --color-cheese-it-up-800: #544000;
  --color-cheese-it-up-900: #3b2c00;
  --color-cheese-it-up-950: #251900;
}

SCSS

$cheese-it-up: #fdde45;
$cheese-it-up-rgb: 253, 222, 69;
$cheese-it-up-light: mix(#fff, $cheese-it-up, 20%);
$cheese-it-up-dark: mix(#000, $cheese-it-up, 20%);

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