Yellow Bird

CSS

:root {
  --yellow-bird: #f1cd7b;
  --yellow-bird-rgb: 241 205 123;
  --yellow-bird-oklch: oklch(0.862 0.109 86.4);
}

.element {
  color: var(--yellow-bird);
  background-color: hsl(42 81% 71%);
  border-color: oklch(0.862 0.109 86.4);
}

Tailwind CSS v4

@theme {
  --color-yellow-bird: #f1cd7b;
  --color-yellow-bird-50: #fff4d2;
  --color-yellow-bird-100: #f7e7bf;
  --color-yellow-bird-200: #e7d29f;
  --color-yellow-bird-300: #ceb575;
  --color-yellow-bird-400: #bb9a4d;
  --color-yellow-bird-500: #a68019;
  --color-yellow-bird-600: #8c6d19;
  --color-yellow-bird-700: #705714;
  --color-yellow-bird-800: #543f0c;
  --color-yellow-bird-900: #3a2b07;
  --color-yellow-bird-950: #251800;
}

SCSS

$yellow-bird: #f1cd7b;
$yellow-bird-rgb: 241, 205, 123;
$yellow-bird-light: mix(#fff, $yellow-bird, 20%);
$yellow-bird-dark: mix(#000, $yellow-bird, 20%);

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