Indian Pale Ale

CSS

:root {
  --indian-pale-ale: #d5bc26;
  --indian-pale-ale-rgb: 213 188 38;
  --indian-pale-ale-oklch: oklch(0.793 0.156 98.9);
}

.element {
  color: var(--indian-pale-ale);
  background-color: hsl(51 70% 49%);
  border-color: oklch(0.793 0.156 98.9);
}

Tailwind CSS v4

@theme {
  --color-indian-pale-ale: #d5bc26;
  --color-indian-pale-ale-50: #fef7c4;
  --color-indian-pale-ale-100: #f3eaae;
  --color-indian-pale-ale-200: #e2d787;
  --color-indian-pale-ale-300: #c9b953;
  --color-indian-pale-ale-400: #b69f00;
  --color-indian-pale-ale-500: #a18500;
  --color-indian-pale-ale-600: #887100;
  --color-indian-pale-ale-700: #6d5a00;
  --color-indian-pale-ale-800: #524100;
  --color-indian-pale-ale-900: #392d00;
  --color-indian-pale-ale-950: #231a00;
}

SCSS

$indian-pale-ale: #d5bc26;
$indian-pale-ale-rgb: 213, 188, 38;
$indian-pale-ale-light: mix(#fff, $indian-pale-ale, 20%);
$indian-pale-ale-dark: mix(#000, $indian-pale-ale, 20%);

.element {
  color: $indian-pale-ale;
  box-shadow: 0 0 0 2px rgba($indian-pale-ale, 0.35);
}