Misty Moonstone

CSS

:root {
  --misty-moonstone: #e5e0cc;
  --misty-moonstone-rgb: 229 224 204;
  --misty-moonstone-oklch: oklch(0.905 0.027 95.4);
}

.element {
  color: var(--misty-moonstone);
  background-color: hsl(48 32% 85%);
  border-color: oklch(0.905 0.027 95.4);
}

Tailwind CSS v4

@theme {
  --color-misty-moonstone: #e5e0cc;
  --color-misty-moonstone-50: #f7f5ed;
  --color-misty-moonstone-100: #eae8de;
  --color-misty-moonstone-200: #d7d5c8;
  --color-misty-moonstone-300: #bbb8a8;
  --color-misty-moonstone-400: #a39f8d;
  --color-misty-moonstone-500: #8b8672;
  --color-misty-moonstone-600: #767261;
  --color-misty-moonstone-700: #5e5b4d;
  --color-misty-moonstone-800: #454238;
  --color-misty-moonstone-900: #302e26;
  --color-misty-moonstone-950: #1c1b15;
}

SCSS

$misty-moonstone: #e5e0cc;
$misty-moonstone-rgb: 229, 224, 204;
$misty-moonstone-light: mix(#fff, $misty-moonstone, 20%);
$misty-moonstone-dark: mix(#000, $misty-moonstone, 20%);

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