Grain of Rice

CSS

:root {
  --grain-of-rice: #dfd2c0;
  --grain-of-rice-rgb: 223 210 192;
  --grain-of-rice-oklch: oklch(0.869 0.028 76.2);
}

.element {
  color: var(--grain-of-rice);
  background-color: hsl(35 33% 81%);
  border-color: oklch(0.869 0.028 76.2);
}

Tailwind CSS v4

@theme {
  --color-grain-of-rice: #dfd2c0;
  --color-grain-of-rice-50: #faf4ec;
  --color-grain-of-rice-100: #ede7de;
  --color-grain-of-rice-200: #dbd3c7;
  --color-grain-of-rice-300: #bfb6a8;
  --color-grain-of-rice-400: #a89d8c;
  --color-grain-of-rice-500: #918472;
  --color-grain-of-rice-600: #7b7060;
  --color-grain-of-rice-700: #62594d;
  --color-grain-of-rice-800: #484138;
  --color-grain-of-rice-900: #322d26;
  --color-grain-of-rice-950: #1e1a14;
}

SCSS

$grain-of-rice: #dfd2c0;
$grain-of-rice-rgb: 223, 210, 192;
$grain-of-rice-light: mix(#fff, $grain-of-rice, 20%);
$grain-of-rice-dark: mix(#000, $grain-of-rice, 20%);

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