Wild Rice

CSS

:root {
  --wild-rice: #d5bfb4;
  --wild-rice-rgb: 213 191 180;
  --wild-rice-oklch: oklch(0.82 0.029 48.3);
}

.element {
  color: var(--wild-rice);
  background-color: hsl(20 28% 77%);
  border-color: oklch(0.82 0.029 48.3);
}

Tailwind CSS v4

@theme {
  --color-wild-rice: #d5bfb4;
  --color-wild-rice-50: #fdf3ee;
  --color-wild-rice-100: #f1e5df;
  --color-wild-rice-200: #dfd1c9;
  --color-wild-rice-300: #c5b3aa;
  --color-wild-rice-400: #ae9a90;
  --color-wild-rice-500: #978176;
  --color-wild-rice-600: #806d64;
  --color-wild-rice-700: #66574f;
  --color-wild-rice-800: #4b3f3a;
  --color-wild-rice-900: #342c28;
  --color-wild-rice-950: #201916;
}

SCSS

$wild-rice: #d5bfb4;
$wild-rice-rgb: 213, 191, 180;
$wild-rice-light: mix(#fff, $wild-rice, 20%);
$wild-rice-dark: mix(#000, $wild-rice, 20%);

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