Mexican Milk

CSS

:root {
  --mexican-milk: #ffb9b2;
  --mexican-milk-rgb: 255 185 178;
  --mexican-milk-oklch: oklch(0.849 0.082 25.4);
}

.element {
  color: var(--mexican-milk);
  background-color: hsl(5 100% 85%);
  border-color: oklch(0.849 0.082 25.4);
}

Tailwind CSS v4

@theme {
  --color-mexican-milk: #ffb9b2;
  --color-mexican-milk-50: #ffede8;
  --color-mexican-milk-100: #ffded9;
  --color-mexican-milk-200: #f6c8c1;
  --color-mexican-milk-300: #dfa8a1;
  --color-mexican-milk-400: #cb8c86;
  --color-mexican-milk-500: #b7706a;
  --color-mexican-milk-600: #9a5f5a;
  --color-mexican-milk-700: #7c4c48;
  --color-mexican-milk-800: #5c3735;
  --color-mexican-milk-900: #402524;
  --color-mexican-milk-950: #291413;
}

SCSS

$mexican-milk: #ffb9b2;
$mexican-milk-rgb: 255, 185, 178;
$mexican-milk-light: mix(#fff, $mexican-milk, 20%);
$mexican-milk-dark: mix(#000, $mexican-milk, 20%);

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