Pressed Laser Lemon

CSS

:root {
  --pressed-laser-lemon: #fefe22;
  --pressed-laser-lemon-rgb: 254 254 34;
  --pressed-laser-lemon-oklch: oklch(0.966 0.205 109.7);
}

.element {
  color: var(--pressed-laser-lemon);
  background-color: hsl(60 99% 56%);
  border-color: oklch(0.966 0.205 109.7);
}

Tailwind CSS v4

@theme {
  --color-pressed-laser-lemon: #fefe22;
  --color-pressed-laser-lemon-50: #f6fcb7;
  --color-pressed-laser-lemon-100: #e9ef9e;
  --color-pressed-laser-lemon-200: #d7dd70;
  --color-pressed-laser-lemon-300: #bbc122;
  --color-pressed-laser-lemon-400: #a8a600;
  --color-pressed-laser-lemon-500: #938d00;
  --color-pressed-laser-lemon-600: #7c7700;
  --color-pressed-laser-lemon-700: #635f00;
  --color-pressed-laser-lemon-800: #4b4500;
  --color-pressed-laser-lemon-900: #343000;
  --color-pressed-laser-lemon-950: #201c00;
}

SCSS

$pressed-laser-lemon: #fefe22;
$pressed-laser-lemon-rgb: 254, 254, 34;
$pressed-laser-lemon-light: mix(#fff, $pressed-laser-lemon, 20%);
$pressed-laser-lemon-dark: mix(#000, $pressed-laser-lemon, 20%);

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