Brown Rice

CSS

:root {
  --brown-rice: #dabd84;
  --brown-rice-rgb: 218 189 132;
  --brown-rice-oklch: oklch(0.81 0.081 83.8);
}

.element {
  color: var(--brown-rice);
  background-color: hsl(40 54% 69%);
  border-color: oklch(0.81 0.081 83.8);
}

Tailwind CSS v4

@theme {
  --color-brown-rice: #dabd84;
  --color-brown-rice-50: #fff4dc;
  --color-brown-rice-100: #f4e7ca;
  --color-brown-rice-200: #e4d2ad;
  --color-brown-rice-300: #cab588;
  --color-brown-rice-400: #b59b66;
  --color-brown-rice-500: #a08143;
  --color-brown-rice-600: #876e3a;
  --color-brown-rice-700: #6c582e;
  --color-brown-rice-800: #504020;
  --color-brown-rice-900: #382c15;
  --color-brown-rice-950: #231906;
}

SCSS

$brown-rice: #dabd84;
$brown-rice-rgb: 218, 189, 132;
$brown-rice-light: mix(#fff, $brown-rice, 20%);
$brown-rice-dark: mix(#000, $brown-rice, 20%);

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