Portica

CSS

:root {
  --portica: #f0d555;
  --portica-rgb: 240 213 85;
  --portica-oklch: oklch(0.872 0.147 97.3);
}

.element {
  color: var(--portica);
  background-color: hsl(50 84% 64%);
  border-color: oklch(0.872 0.147 97.3);
}

Tailwind CSS v4

@theme {
  --color-portica: #f0d555;
  --color-portica-50: #fff7c6;
  --color-portica-100: #f4eab1;
  --color-portica-200: #e3d68b;
  --color-portica-300: #cab959;
  --color-portica-400: #b79e15;
  --color-portica-500: #a28400;
  --color-portica-600: #897000;
  --color-portica-700: #6e5900;
  --color-portica-800: #524100;
  --color-portica-900: #392d00;
  --color-portica-950: #241900;
}

SCSS

$portica: #f0d555;
$portica-rgb: 240, 213, 85;
$portica-light: mix(#fff, $portica, 20%);
$portica-dark: mix(#000, $portica, 20%);

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