Nesting Dove

CSS

:root {
  --nesting-dove: #eeeada;
  --nesting-dove-rgb: 238 234 218;
  --nesting-dove-oklch: oklch(0.936 0.022 95.3);
}

.element {
  color: var(--nesting-dove);
  background-color: hsl(48 37% 89%);
  border-color: oklch(0.936 0.022 95.3);
}

Tailwind CSS v4

@theme {
  --color-nesting-dove: #eeeada;
  --color-nesting-dove-50: #f7f5ee;
  --color-nesting-dove-100: #eae8e0;
  --color-nesting-dove-200: #d7d4ca;
  --color-nesting-dove-300: #bab8ab;
  --color-nesting-dove-400: #a29f90;
  --color-nesting-dove-500: #8a8676;
  --color-nesting-dove-600: #757264;
  --color-nesting-dove-700: #5e5b50;
  --color-nesting-dove-800: #45423a;
  --color-nesting-dove-900: #302e28;
  --color-nesting-dove-950: #1c1b16;
}

SCSS

$nesting-dove: #eeeada;
$nesting-dove-rgb: 238, 234, 218;
$nesting-dove-light: mix(#fff, $nesting-dove, 20%);
$nesting-dove-dark: mix(#000, $nesting-dove, 20%);

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