Pale Ale

CSS

:root {
  --pale-ale: #fef068;
  --pale-ale-rgb: 254 240 104;
  --pale-ale-oklch: oklch(0.941 0.155 103.4);
}

.element {
  color: var(--pale-ale);
  background-color: hsl(54 99% 70%);
  border-color: oklch(0.941 0.155 103.4);
}

Tailwind CSS v4

@theme {
  --color-pale-ale: #fef068;
  --color-pale-ale-50: #fbf9c5;
  --color-pale-ale-100: #efecaf;
  --color-pale-ale-200: #ddd989;
  --color-pale-ale-300: #c3bc56;
  --color-pale-ale-400: #afa100;
  --color-pale-ale-500: #9a8800;
  --color-pale-ale-600: #827300;
  --color-pale-ale-700: #685c00;
  --color-pale-ale-800: #4e4300;
  --color-pale-ale-900: #362e00;
  --color-pale-ale-950: #211b00;
}

SCSS

$pale-ale: #fef068;
$pale-ale-rgb: 254, 240, 104;
$pale-ale-light: mix(#fff, $pale-ale, 20%);
$pale-ale-dark: mix(#000, $pale-ale, 20%);

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