Potato Chip

CSS

:root {
  --potato-chip: #fddc57;
  --potato-chip-rgb: 253 220 87;
  --potato-chip-oklch: oklch(0.898 0.152 95.1);
}

.element {
  color: var(--potato-chip);
  background-color: hsl(48 98% 67%);
  border-color: oklch(0.898 0.152 95.1);
}

Tailwind CSS v4

@theme {
  --color-potato-chip: #fddc57;
  --color-potato-chip-50: #fff6c4;
  --color-potato-chip-100: #f6e9ae;
  --color-potato-chip-200: #e6d588;
  --color-potato-chip-300: #cdb854;
  --color-potato-chip-400: #bb9c00;
  --color-potato-chip-500: #a68200;
  --color-potato-chip-600: #8c6e00;
  --color-potato-chip-700: #705800;
  --color-potato-chip-800: #544000;
  --color-potato-chip-900: #3b2c00;
  --color-potato-chip-950: #251900;
}

SCSS

$potato-chip: #fddc57;
$potato-chip-rgb: 253, 220, 87;
$potato-chip-light: mix(#fff, $potato-chip, 20%);
$potato-chip-dark: mix(#000, $potato-chip, 20%);

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