Half Moon

CSS

:root {
  --half-moon: #cccdb9;
  --half-moon-rgb: 204 205 185;
  --half-moon-oklch: oklch(0.842 0.027 109.3);
}

.element {
  color: var(--half-moon);
  background-color: hsl(63 17% 76%);
  border-color: oklch(0.842 0.027 109.3);
}

Tailwind CSS v4

@theme {
  --color-half-moon: #cccdb9;
  --color-half-moon-50: #f5f6ed;
  --color-half-moon-100: #e8e9df;
  --color-half-moon-200: #d4d6c8;
  --color-half-moon-300: #b7b9a9;
  --color-half-moon-400: #9fa08e;
  --color-half-moon-500: #878873;
  --color-half-moon-600: #727362;
  --color-half-moon-700: #5b5c4e;
  --color-half-moon-800: #434338;
  --color-half-moon-900: #2e2e27;
  --color-half-moon-950: #1b1b15;
}

SCSS

$half-moon: #cccdb9;
$half-moon-rgb: 204, 205, 185;
$half-moon-light: mix(#fff, $half-moon, 20%);
$half-moon-dark: mix(#000, $half-moon, 20%);

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