Late Bloomer

CSS

:root {
  --late-bloomer: #db8959;
  --late-bloomer-rgb: 219 137 89;
  --late-bloomer-oklch: oklch(0.706 0.119 50.2);
}

.element {
  color: var(--late-bloomer);
  background-color: hsl(22 64% 60%);
  border-color: oklch(0.706 0.119 50.2);
}

Tailwind CSS v4

@theme {
  --color-late-bloomer: #db8959;
  --color-late-bloomer-50: #ffedd7;
  --color-late-bloomer-100: #ffdec4;
  --color-late-bloomer-200: #fec7a6;
  --color-late-bloomer-300: #e8a67e;
  --color-late-bloomer-400: #d6895c;
  --color-late-bloomer-500: #c36c35;
  --color-late-bloomer-600: #a55c2e;
  --color-late-bloomer-700: #844924;
  --color-late-bloomer-800: #63341a;
  --color-late-bloomer-900: #452411;
  --color-late-bloomer-950: #2d1204;
}

SCSS

$late-bloomer: #db8959;
$late-bloomer-rgb: 219, 137, 89;
$late-bloomer-light: mix(#fff, $late-bloomer, 20%);
$late-bloomer-dark: mix(#000, $late-bloomer, 20%);

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