Light Vanilla Quake

CSS

:root {
  --light-vanilla-quake: #d8d5d0;
  --light-vanilla-quake-rgb: 216 213 208;
  --light-vanilla-quake-oklch: oklch(0.874 0.008 80.7);
}

.element {
  color: var(--light-vanilla-quake);
  background-color: hsl(38 9% 83%);
  border-color: oklch(0.874 0.008 80.7);
}

Tailwind CSS v4

@theme {
  --color-light-vanilla-quake: #d8d5d0;
  --color-light-vanilla-quake-50: #f6f5f3;
  --color-light-vanilla-quake-100: #e9e8e5;
  --color-light-vanilla-quake-200: #d6d4d1;
  --color-light-vanilla-quake-300: #b9b7b3;
  --color-light-vanilla-quake-400: #a19e99;
  --color-light-vanilla-quake-500: #898681;
  --color-light-vanilla-quake-600: #74716d;
  --color-light-vanilla-quake-700: #5d5a57;
  --color-light-vanilla-quake-800: #44423f;
  --color-light-vanilla-quake-900: #2f2e2c;
  --color-light-vanilla-quake-950: #1b1a19;
}

SCSS

$light-vanilla-quake: #d8d5d0;
$light-vanilla-quake-rgb: 216, 213, 208;
$light-vanilla-quake-light: mix(#fff, $light-vanilla-quake, 20%);
$light-vanilla-quake-dark: mix(#000, $light-vanilla-quake, 20%);

.element {
  color: $light-vanilla-quake;
  box-shadow: 0 0 0 2px rgba($light-vanilla-quake, 0.35);
}