Noteworthy

CSS

:root {
  --noteworthy: #d9bacc;
  --noteworthy-rgb: 217 186 204;
  --noteworthy-oklch: oklch(0.821 0.043 342.3);
}

.element {
  color: var(--noteworthy);
  background-color: hsl(325 29% 79%);
  border-color: oklch(0.821 0.043 342.3);
}

Tailwind CSS v4

@theme {
  --color-noteworthy: #d9bacc;
  --color-noteworthy-50: #fff1f8;
  --color-noteworthy-100: #f3e2eb;
  --color-noteworthy-200: #e2cdd9;
  --color-noteworthy-300: #c8afbd;
  --color-noteworthy-400: #b195a5;
  --color-noteworthy-500: #9b7b8e;
  --color-noteworthy-600: #836878;
  --color-noteworthy-700: #695360;
  --color-noteworthy-800: #4d3d47;
  --color-noteworthy-900: #352a31;
  --color-noteworthy-950: #21171d;
}

SCSS

$noteworthy: #d9bacc;
$noteworthy-rgb: 217, 186, 204;
$noteworthy-light: mix(#fff, $noteworthy, 20%);
$noteworthy-dark: mix(#000, $noteworthy, 20%);

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