A Brand New Day

CSS

:root {
  --a-brand-new-day: #ffaabb;
  --a-brand-new-day-rgb: 255 170 187;
  --a-brand-new-day-oklch: oklch(0.825 0.102 6.5);
}

.element {
  color: var(--a-brand-new-day);
  background-color: hsl(348 100% 83%);
  border-color: oklch(0.825 0.102 6.5);
}

Tailwind CSS v4

@theme {
  --color-a-brand-new-day: #ffaabb;
  --color-a-brand-new-day-50: #ffeaef;
  --color-a-brand-new-day-100: #ffdbe1;
  --color-a-brand-new-day-200: #fcc3cb;
  --color-a-brand-new-day-300: #e6a2ad;
  --color-a-brand-new-day-400: #d28595;
  --color-a-brand-new-day-500: #be687b;
  --color-a-brand-new-day-600: #a15868;
  --color-a-brand-new-day-700: #814653;
  --color-a-brand-new-day-800: #5f333e;
  --color-a-brand-new-day-900: #43222b;
  --color-a-brand-new-day-950: #2b1118;
}

SCSS

$a-brand-new-day: #ffaabb;
$a-brand-new-day-rgb: 255, 170, 187;
$a-brand-new-day-light: mix(#fff, $a-brand-new-day, 20%);
$a-brand-new-day-dark: mix(#000, $a-brand-new-day, 20%);

.element {
  color: $a-brand-new-day;
  box-shadow: 0 0 0 2px rgba($a-brand-new-day, 0.35);
}