It’s My Party

CSS

:root {
  --it-s-my-party: #cc7365;
  --it-s-my-party-rgb: 204 115 101;
  --it-s-my-party-oklch: oklch(0.651 0.115 29.9);
}

.element {
  color: var(--it-s-my-party);
  background-color: hsl(8 50% 60%);
  border-color: oklch(0.651 0.115 29.9);
}

Tailwind CSS v4

@theme {
  --color-it-s-my-party: #cc7365;
  --color-it-s-my-party-50: #ffeae1;
  --color-it-s-my-party-100: #ffdbd0;
  --color-it-s-my-party-200: #ffc3b6;
  --color-it-s-my-party-300: #eca293;
  --color-it-s-my-party-400: #da8476;
  --color-it-s-my-party-500: #c76657;
  --color-it-s-my-party-600: #a8574a;
  --color-it-s-my-party-700: #87453b;
  --color-it-s-my-party-800: #64312b;
  --color-it-s-my-party-900: #46221d;
  --color-it-s-my-party-950: #2e100d;
}

SCSS

$it-s-my-party: #cc7365;
$it-s-my-party-rgb: 204, 115, 101;
$it-s-my-party-light: mix(#fff, $it-s-my-party, 20%);
$it-s-my-party-dark: mix(#000, $it-s-my-party, 20%);

.element {
  color: $it-s-my-party;
  box-shadow: 0 0 0 2px rgba($it-s-my-party, 0.35);
}