Wide-Eyed

CSS

:root {
  --wide-eyed: #f9d9d7;
  --wide-eyed-rgb: 249 217 215;
  --wide-eyed-oklch: oklch(0.911 0.036 22.1);
}

.element {
  color: var(--wide-eyed);
  background-color: hsl(4 74% 91%);
  border-color: oklch(0.911 0.036 22.1);
}

Tailwind CSS v4

@theme {
  --color-wide-eyed: #f9d9d7;
  --color-wide-eyed-50: #fff1f0;
  --color-wide-eyed-100: #f4e4e2;
  --color-wide-eyed-200: #e3cfcd;
  --color-wide-eyed-300: #c9b1ae;
  --color-wide-eyed-400: #b39795;
  --color-wide-eyed-500: #9d7d7b;
  --color-wide-eyed-600: #856a69;
  --color-wide-eyed-700: #6a5554;
  --color-wide-eyed-800: #4e3e3d;
  --color-wide-eyed-900: #362a2a;
  --color-wide-eyed-950: #211818;
}

SCSS

$wide-eyed: #f9d9d7;
$wide-eyed-rgb: 249, 217, 215;
$wide-eyed-light: mix(#fff, $wide-eyed, 20%);
$wide-eyed-dark: mix(#000, $wide-eyed, 20%);

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