Ivory Brown

CSS

:root {
  --ivory-brown: #c4b8a9;
  --ivory-brown-rgb: 196 184 169;
  --ivory-brown-oklch: oklch(0.788 0.025 73.5);
}

.element {
  color: var(--ivory-brown);
  background-color: hsl(33 19% 72%);
  border-color: oklch(0.788 0.025 73.5);
}

Tailwind CSS v4

@theme {
  --color-ivory-brown: #c4b8a9;
  --color-ivory-brown-50: #f9f4ed;
  --color-ivory-brown-100: #ede7df;
  --color-ivory-brown-200: #dbd3c9;
  --color-ivory-brown-300: #bfb6aa;
  --color-ivory-brown-400: #a89d8f;
  --color-ivory-brown-500: #908474;
  --color-ivory-brown-600: #7a7063;
  --color-ivory-brown-700: #62594f;
  --color-ivory-brown-800: #484139;
  --color-ivory-brown-900: #322d27;
  --color-ivory-brown-950: #1e1a15;
}

SCSS

$ivory-brown: #c4b8a9;
$ivory-brown-rgb: 196, 184, 169;
$ivory-brown-light: mix(#fff, $ivory-brown, 20%);
$ivory-brown-dark: mix(#000, $ivory-brown, 20%);

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