Hitchcock Milk

CSS

:root {
  --hitchcock-milk: #eeffa9;
  --hitchcock-milk-rgb: 238 255 169;
  --hitchcock-milk-oklch: oklch(0.968 0.11 117.6);
}

.element {
  color: var(--hitchcock-milk);
  background-color: hsl(72 100% 83%);
  border-color: oklch(0.968 0.11 117.6);
}

Tailwind CSS v4

@theme {
  --color-hitchcock-milk: #eeffa9;
  --color-hitchcock-milk-50: #f1fad7;
  --color-hitchcock-milk-100: #e3eec5;
  --color-hitchcock-milk-200: #cedca7;
  --color-hitchcock-milk-300: #b0c07f;
  --color-hitchcock-milk-400: #99a759;
  --color-hitchcock-milk-500: #818f30;
  --color-hitchcock-milk-600: #6d792a;
  --color-hitchcock-milk-700: #576121;
  --color-hitchcock-milk-800: #414715;
  --color-hitchcock-milk-900: #2d310d;
  --color-hitchcock-milk-950: #1a1d02;
}

SCSS

$hitchcock-milk: #eeffa9;
$hitchcock-milk-rgb: 238, 255, 169;
$hitchcock-milk-light: mix(#fff, $hitchcock-milk, 20%);
$hitchcock-milk-dark: mix(#000, $hitchcock-milk, 20%);

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