Bird’s Child

CSS

:root {
  --bird-s-child: #fff1cf;
  --bird-s-child-rgb: 255 241 207;
  --bird-s-child-oklch: oklch(0.961 0.047 88.3);
}

.element {
  color: var(--bird-s-child);
  background-color: hsl(42 100% 91%);
  border-color: oklch(0.961 0.047 88.3);
}

Tailwind CSS v4

@theme {
  --color-bird-s-child: #fff1cf;
  --color-bird-s-child-50: #faf5e6;
  --color-bird-s-child-100: #eee8d7;
  --color-bird-s-child-200: #dcd4be;
  --color-bird-s-child-300: #c0b79d;
  --color-bird-s-child-400: #aa9d7f;
  --color-bird-s-child-500: #938563;
  --color-bird-s-child-600: #7c7054;
  --color-bird-s-child-700: #635a43;
  --color-bird-s-child-800: #4a4130;
  --color-bird-s-child-900: #332d20;
  --color-bird-s-child-950: #1f1a10;
}

SCSS

$bird-s-child: #fff1cf;
$bird-s-child-rgb: 255, 241, 207;
$bird-s-child-light: mix(#fff, $bird-s-child, 20%);
$bird-s-child-dark: mix(#000, $bird-s-child, 20%);

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