Dream Grass

CSS

:root {
  --dream-grass: #dfdac1;
  --dream-grass-rgb: 223 218 193;
  --dream-grass-oklch: oklch(0.886 0.034 97.7);
}

.element {
  color: var(--dream-grass);
  background-color: hsl(50 32% 82%);
  border-color: oklch(0.886 0.034 97.7);
}

Tailwind CSS v4

@theme {
  --color-dream-grass: #dfdac1;
  --color-dream-grass-50: #f7f6eb;
  --color-dream-grass-100: #eae8dc;
  --color-dream-grass-200: #d7d5c5;
  --color-dream-grass-300: #bbb8a5;
  --color-dream-grass-400: #a49f88;
  --color-dream-grass-500: #8c876d;
  --color-dream-grass-600: #76725d;
  --color-dream-grass-700: #5f5b4a;
  --color-dream-grass-800: #464235;
  --color-dream-grass-900: #302e24;
  --color-dream-grass-950: #1d1b13;
}

SCSS

$dream-grass: #dfdac1;
$dream-grass-rgb: 223, 218, 193;
$dream-grass-light: mix(#fff, $dream-grass, 20%);
$dream-grass-dark: mix(#000, $dream-grass, 20%);

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