Quinoline Yellow

CSS

:root {
  --quinoline-yellow: #f5e326;
  --quinoline-yellow-rgb: 245 227 38;
  --quinoline-yellow-oklch: oklch(0.903 0.183 103.4);
}

.element {
  color: var(--quinoline-yellow);
  background-color: hsl(55 91% 55%);
  border-color: oklch(0.903 0.183 103.4);
}

Tailwind CSS v4

@theme {
  --color-quinoline-yellow: #f5e326;
  --color-quinoline-yellow-50: #fcf9bc;
  --color-quinoline-yellow-100: #f0eca4;
  --color-quinoline-yellow-200: #dfd979;
  --color-quinoline-yellow-300: #c5bc39;
  --color-quinoline-yellow-400: #b3a100;
  --color-quinoline-yellow-500: #9e8700;
  --color-quinoline-yellow-600: #857300;
  --color-quinoline-yellow-700: #6b5c00;
  --color-quinoline-yellow-800: #514200;
  --color-quinoline-yellow-900: #382e00;
  --color-quinoline-yellow-950: #231a00;
}

SCSS

$quinoline-yellow: #f5e326;
$quinoline-yellow-rgb: 245, 227, 38;
$quinoline-yellow-light: mix(#fff, $quinoline-yellow, 20%);
$quinoline-yellow-dark: mix(#000, $quinoline-yellow, 20%);

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