Melt With You

CSS

:root {
  --melt-with-you: #e3cfab;
  --melt-with-you-rgb: 227 207 171;
  --melt-with-you-oklch: oklch(0.862 0.053 82.2);
}

.element {
  color: var(--melt-with-you);
  background-color: hsl(39 50% 78%);
  border-color: oklch(0.862 0.053 82.2);
}

Tailwind CSS v4

@theme {
  --color-melt-with-you: #e3cfab;
  --color-melt-with-you-50: #fcf4e5;
  --color-melt-with-you-100: #f0e7d5;
  --color-melt-with-you-200: #dfd3bb;
  --color-melt-with-you-300: #c4b699;
  --color-melt-with-you-400: #ae9c7b;
  --color-melt-with-you-500: #98835e;
  --color-melt-with-you-600: #806f50;
  --color-melt-with-you-700: #675940;
  --color-melt-with-you-800: #4c412d;
  --color-melt-with-you-900: #352c1f;
  --color-melt-with-you-950: #201a0e;
}

SCSS

$melt-with-you: #e3cfab;
$melt-with-you-rgb: 227, 207, 171;
$melt-with-you-light: mix(#fff, $melt-with-you, 20%);
$melt-with-you-dark: mix(#000, $melt-with-you, 20%);

.element {
  color: $melt-with-you;
  box-shadow: 0 0 0 2px rgba($melt-with-you, 0.35);
}