Picasso

CSS

:root {
  --picasso: #f8ea97;
  --picasso-rgb: 248 234 151;
  --picasso-oklch: oklch(0.93 0.104 99.9);
}

.element {
  color: var(--picasso);
  background-color: hsl(51 87% 78%);
  border-color: oklch(0.93 0.104 99.9);
}

Tailwind CSS v4

@theme {
  --color-picasso: #f8ea97;
  --color-picasso-50: #fbf7d5;
  --color-picasso-100: #eeeac2;
  --color-picasso-200: #ddd6a3;
  --color-picasso-300: #c2ba7a;
  --color-picasso-400: #ada053;
  --color-picasso-500: #978726;
  --color-picasso-600: #7f7223;
  --color-picasso-700: #665b1c;
  --color-picasso-800: #4c4211;
  --color-picasso-900: #352e0b;
  --color-picasso-950: #201a01;
}

SCSS

$picasso: #f8ea97;
$picasso-rgb: 248, 234, 151;
$picasso-light: mix(#fff, $picasso, 20%);
$picasso-dark: mix(#000, $picasso, 20%);

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