Castle in the Clouds

CSS

:root {
  --castle-in-the-clouds: #efdcca;
  --castle-in-the-clouds-rgb: 239 220 202;
  --castle-in-the-clouds-oklch: oklch(0.905 0.032 65.9);
}

.element {
  color: var(--castle-in-the-clouds);
  background-color: hsl(29 54% 86%);
  border-color: oklch(0.905 0.032 65.9);
}

Tailwind CSS v4

@theme {
  --color-castle-in-the-clouds: #efdcca;
  --color-castle-in-the-clouds-50: #fcf4ec;
  --color-castle-in-the-clouds-100: #efe6dd;
  --color-castle-in-the-clouds-200: #ded2c6;
  --color-castle-in-the-clouds-300: #c3b5a6;
  --color-castle-in-the-clouds-400: #ac9b8b;
  --color-castle-in-the-clouds-500: #958270;
  --color-castle-in-the-clouds-600: #7e6e5f;
  --color-castle-in-the-clouds-700: #65584c;
  --color-castle-in-the-clouds-800: #4b4037;
  --color-castle-in-the-clouds-900: #342c26;
  --color-castle-in-the-clouds-950: #1f1914;
}

SCSS

$castle-in-the-clouds: #efdcca;
$castle-in-the-clouds-rgb: 239, 220, 202;
$castle-in-the-clouds-light: mix(#fff, $castle-in-the-clouds, 20%);
$castle-in-the-clouds-dark: mix(#000, $castle-in-the-clouds, 20%);

.element {
  color: $castle-in-the-clouds;
  box-shadow: 0 0 0 2px rgba($castle-in-the-clouds, 0.35);
}