Misty Mustard

CSS

:root {
  --misty-mustard: #f7ebd1;
  --misty-mustard-rgb: 247 235 209;
  --misty-mustard-oklch: oklch(0.943 0.037 86.2);
}

.element {
  color: var(--misty-mustard);
  background-color: hsl(41 70% 89%);
  border-color: oklch(0.943 0.037 86.2);
}

Tailwind CSS v4

@theme {
  --color-misty-mustard: #f7ebd1;
  --color-misty-mustard-50: #f9f5ea;
  --color-misty-mustard-100: #ede7da;
  --color-misty-mustard-200: #dbd4c3;
  --color-misty-mustard-300: #bfb7a3;
  --color-misty-mustard-400: #a89d86;
  --color-misty-mustard-500: #91856b;
  --color-misty-mustard-600: #7b715b;
  --color-misty-mustard-700: #625a48;
  --color-misty-mustard-800: #484234;
  --color-misty-mustard-900: #322d23;
  --color-misty-mustard-950: #1e1a12;
}

SCSS

$misty-mustard: #f7ebd1;
$misty-mustard-rgb: 247, 235, 209;
$misty-mustard-light: mix(#fff, $misty-mustard, 20%);
$misty-mustard-dark: mix(#000, $misty-mustard, 20%);

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