Pale Ivy

CSS

:root {
  --pale-ivy: #d4cfb2;
  --pale-ivy-rgb: 212 207 178;
  --pale-ivy-oklch: oklch(0.851 0.039 99.1);
}

.element {
  color: var(--pale-ivy);
  background-color: hsl(51 28% 76%);
  border-color: oklch(0.851 0.039 99.1);
}

Tailwind CSS v4

@theme {
  --color-pale-ivy: #d4cfb2;
  --color-pale-ivy-50: #f7f6e9;
  --color-pale-ivy-100: #eae9da;
  --color-pale-ivy-200: #d7d5c2;
  --color-pale-ivy-300: #bbb8a2;
  --color-pale-ivy-400: #a49f85;
  --color-pale-ivy-500: #8c8769;
  --color-pale-ivy-600: #777259;
  --color-pale-ivy-700: #5f5b47;
  --color-pale-ivy-800: #464333;
  --color-pale-ivy-900: #302e23;
  --color-pale-ivy-950: #1d1b12;
}

SCSS

$pale-ivy: #d4cfb2;
$pale-ivy-rgb: 212, 207, 178;
$pale-ivy-light: mix(#fff, $pale-ivy, 20%);
$pale-ivy-dark: mix(#000, $pale-ivy, 20%);

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