Notes of Plum

CSS

:root {
  --notes-of-plum: #770f05;
  --notes-of-plum-rgb: 119 15 5;
  --notes-of-plum-oklch: oklch(0.366 0.138 30.4);
}

.element {
  color: var(--notes-of-plum);
  background-color: hsl(5 92% 24%);
  border-color: oklch(0.366 0.138 30.4);
}

Tailwind CSS v4

@theme {
  --color-notes-of-plum: #770f05;
  --color-notes-of-plum-50: #ffe8dc;
  --color-notes-of-plum-100: #ffd8cb;
  --color-notes-of-plum-200: #ffbfaf;
  --color-notes-of-plum-300: #f69d8a;
  --color-notes-of-plum-400: #e47d6c;
  --color-notes-of-plum-500: #d25c4b;
  --color-notes-of-plum-600: #b14f40;
  --color-notes-of-plum-700: #8e3f33;
  --color-notes-of-plum-800: #6a2c26;
  --color-notes-of-plum-900: #4b1e19;
  --color-notes-of-plum-950: #310d0a;
}

SCSS

$notes-of-plum: #770f05;
$notes-of-plum-rgb: 119, 15, 5;
$notes-of-plum-light: mix(#fff, $notes-of-plum, 20%);
$notes-of-plum-dark: mix(#000, $notes-of-plum, 20%);

.element {
  color: $notes-of-plum;
  box-shadow: 0 0 0 2px rgba($notes-of-plum, 0.35);
}