Banana Pepper

CSS

:root {
  --banana-pepper: #fdd630;
  --banana-pepper-rgb: 253 214 48;
  --banana-pepper-oklch: oklch(0.884 0.171 94.5);
}

.element {
  color: var(--banana-pepper);
  background-color: hsl(49 98% 59%);
  border-color: oklch(0.884 0.171 94.5);
}

Tailwind CSS v4

@theme {
  --color-banana-pepper: #fdd630;
  --color-banana-pepper-50: #fff6be;
  --color-banana-pepper-100: #f8e9a7;
  --color-banana-pepper-200: #e9d57d;
  --color-banana-pepper-300: #d1b741;
  --color-banana-pepper-400: #bf9b00;
  --color-banana-pepper-500: #ab8000;
  --color-banana-pepper-600: #906d00;
  --color-banana-pepper-700: #745700;
  --color-banana-pepper-800: #573f00;
  --color-banana-pepper-900: #3d2b00;
  --color-banana-pepper-950: #261800;
}

SCSS

$banana-pepper: #fdd630;
$banana-pepper-rgb: 253, 214, 48;
$banana-pepper-light: mix(#fff, $banana-pepper, 20%);
$banana-pepper-dark: mix(#000, $banana-pepper, 20%);

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