Yellow Pepper

CSS

:root {
  --yellow-pepper: #eeef06;
  --yellow-pepper-rgb: 238 239 6;
  --yellow-pepper-oklch: oklch(0.921 0.2 110.1);
}

.element {
  color: var(--yellow-pepper);
  background-color: hsl(60 95% 48%);
  border-color: oklch(0.921 0.2 110.1);
}

Tailwind CSS v4

@theme {
  --color-yellow-pepper: #eeef06;
  --color-yellow-pepper-50: #f6fcb9;
  --color-yellow-pepper-100: #e9efa0;
  --color-yellow-pepper-200: #d6dd73;
  --color-yellow-pepper-300: #bac12c;
  --color-yellow-pepper-400: #a7a600;
  --color-yellow-pepper-500: #918d00;
  --color-yellow-pepper-600: #7b7700;
  --color-yellow-pepper-700: #626000;
  --color-yellow-pepper-800: #4a4500;
  --color-yellow-pepper-900: #343000;
  --color-yellow-pepper-950: #1f1c00;
}

SCSS

$yellow-pepper: #eeef06;
$yellow-pepper-rgb: 238, 239, 6;
$yellow-pepper-light: mix(#fff, $yellow-pepper, 20%);
$yellow-pepper-dark: mix(#000, $yellow-pepper, 20%);

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