Milk Coffee Brown

CSS

:root {
  --milk-coffee-brown: #966f5d;
  --milk-coffee-brown-rgb: 150 111 93;
  --milk-coffee-brown-oklch: oklch(0.576 0.057 45.9);
}

.element {
  color: var(--milk-coffee-brown);
  background-color: hsl(19 23% 48%);
  border-color: oklch(0.576 0.057 45.9);
}

Tailwind CSS v4

@theme {
  --color-milk-coffee-brown: #966f5d;
  --color-milk-coffee-brown-50: #fff1e7;
  --color-milk-coffee-brown-100: #f9e3d8;
  --color-milk-coffee-brown-200: #eacec0;
  --color-milk-coffee-brown-300: #d1af9f;
  --color-milk-coffee-brown-400: #bc9583;
  --color-milk-coffee-brown-500: #a67b67;
  --color-milk-coffee-brown-600: #8d6857;
  --color-milk-coffee-brown-700: #715345;
  --color-milk-coffee-brown-800: #533c32;
  --color-milk-coffee-brown-900: #3a2922;
  --color-milk-coffee-brown-950: #241711;
}

SCSS

$milk-coffee-brown: #966f5d;
$milk-coffee-brown-rgb: 150, 111, 93;
$milk-coffee-brown-light: mix(#fff, $milk-coffee-brown, 20%);
$milk-coffee-brown-dark: mix(#000, $milk-coffee-brown, 20%);

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