Wise Owl

CSS

:root {
  --wise-owl: #cdbba5;
  --wise-owl-rgb: 205 187 165;
  --wise-owl-oklch: oklch(0.801 0.036 72.8);
}

.element {
  color: var(--wise-owl);
  background-color: hsl(33 29% 73%);
  border-color: oklch(0.801 0.036 72.8);
}

Tailwind CSS v4

@theme {
  --color-wise-owl: #cdbba5;
  --color-wise-owl-50: #fbf4ea;
  --color-wise-owl-100: #efe6db;
  --color-wise-owl-200: #ded2c4;
  --color-wise-owl-300: #c3b5a3;
  --color-wise-owl-400: #ac9c87;
  --color-wise-owl-500: #95836c;
  --color-wise-owl-600: #7e6f5c;
  --color-wise-owl-700: #655949;
  --color-wise-owl-800: #4b4035;
  --color-wise-owl-900: #342c24;
  --color-wise-owl-950: #1f1913;
}

SCSS

$wise-owl: #cdbba5;
$wise-owl-rgb: 205, 187, 165;
$wise-owl-light: mix(#fff, $wise-owl, 20%);
$wise-owl-dark: mix(#000, $wise-owl, 20%);

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