Dazzle and Delight

CSS

:root {
  --dazzle-and-delight: #d99b7b;
  --dazzle-and-delight-rgb: 217 155 123;
  --dazzle-and-delight-oklch: oklch(0.742 0.087 48.2);
}

.element {
  color: var(--dazzle-and-delight);
  background-color: hsl(20 55% 67%);
  border-color: oklch(0.742 0.087 48.2);
}

Tailwind CSS v4

@theme {
  --color-dazzle-and-delight: #d99b7b;
  --color-dazzle-and-delight-50: #ffefe0;
  --color-dazzle-and-delight-100: #ffe0cf;
  --color-dazzle-and-delight-200: #f4cab4;
  --color-dazzle-and-delight-300: #ddab90;
  --color-dazzle-and-delight-400: #c98f71;
  --color-dazzle-and-delight-500: #b57452;
  --color-dazzle-and-delight-600: #996246;
  --color-dazzle-and-delight-700: #7b4f37;
  --color-dazzle-and-delight-800: #5b3928;
  --color-dazzle-and-delight-900: #40271b;
  --color-dazzle-and-delight-950: #29150b;
}

SCSS

$dazzle-and-delight: #d99b7b;
$dazzle-and-delight-rgb: 217, 155, 123;
$dazzle-and-delight-light: mix(#fff, $dazzle-and-delight, 20%);
$dazzle-and-delight-dark: mix(#000, $dazzle-and-delight, 20%);

.element {
  color: $dazzle-and-delight;
  box-shadow: 0 0 0 2px rgba($dazzle-and-delight, 0.35);
}