That’s My Jam

CSS

:root {
  --that-s-my-jam: #8e3350;
  --that-s-my-jam-rgb: 142 51 80;
  --that-s-my-jam-oklch: oklch(0.459 0.126 3.7);
}

.element {
  color: var(--that-s-my-jam);
  background-color: hsl(341 47% 38%);
  border-color: oklch(0.459 0.126 3.7);
}

Tailwind CSS v4

@theme {
  --color-that-s-my-jam: #8e3350;
  --color-that-s-my-jam-50: #ffe7f0;
  --color-that-s-my-jam-100: #ffd7e2;
  --color-that-s-my-jam-200: #ffbecc;
  --color-that-s-my-jam-300: #ef9cae;
  --color-that-s-my-jam-400: #dc7d96;
  --color-that-s-my-jam-500: #c85e7d;
  --color-that-s-my-jam-600: #a9506a;
  --color-that-s-my-jam-700: #884054;
  --color-that-s-my-jam-800: #652e3f;
  --color-that-s-my-jam-900: #471f2b;
  --color-that-s-my-jam-950: #2e0e19;
}

SCSS

$that-s-my-jam: #8e3350;
$that-s-my-jam-rgb: 142, 51, 80;
$that-s-my-jam-light: mix(#fff, $that-s-my-jam, 20%);
$that-s-my-jam-dark: mix(#000, $that-s-my-jam, 20%);

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