Half Moon Bay Blush

CSS

:root {
  --half-moon-bay-blush: #cda894;
  --half-moon-bay-blush-rgb: 205 168 148;
  --half-moon-bay-blush-oklch: oklch(0.76 0.052 50);
}

.element {
  color: var(--half-moon-bay-blush);
  background-color: hsl(21 36% 69%);
  border-color: oklch(0.76 0.052 50);
}

Tailwind CSS v4

@theme {
  --color-half-moon-bay-blush: #cda894;
  --color-half-moon-bay-blush-50: #fff1e8;
  --color-half-moon-bay-blush-100: #f7e4d8;
  --color-half-moon-bay-blush-200: #e7cfc0;
  --color-half-moon-bay-blush-300: #ceb1a0;
  --color-half-moon-bay-blush-400: #b99683;
  --color-half-moon-bay-blush-500: #a37d67;
  --color-half-moon-bay-blush-600: #8a6958;
  --color-half-moon-bay-blush-700: #6e5446;
  --color-half-moon-bay-blush-800: #523d33;
  --color-half-moon-bay-blush-900: #392a23;
  --color-half-moon-bay-blush-950: #231812;
}

SCSS

$half-moon-bay-blush: #cda894;
$half-moon-bay-blush-rgb: 205, 168, 148;
$half-moon-bay-blush-light: mix(#fff, $half-moon-bay-blush, 20%);
$half-moon-bay-blush-dark: mix(#000, $half-moon-bay-blush, 20%);

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