Dark Potion

CSS

:root {
  --dark-potion: #603e53;
  --dark-potion-rgb: 96 62 83;
  --dark-potion-oklch: oklch(0.41 0.057 342.3);
}

.element {
  color: var(--dark-potion);
  background-color: hsl(323 22% 31%);
  border-color: oklch(0.41 0.057 342.3);
}

Tailwind CSS v4

@theme {
  --color-dark-potion: #603e53;
  --color-dark-potion-50: #ffeff9;
  --color-dark-potion-100: #f7e1ec;
  --color-dark-potion-200: #e7cbda;
  --color-dark-potion-300: #ceacbe;
  --color-dark-potion-400: #b792a8;
  --color-dark-potion-500: #a17791;
  --color-dark-potion-600: #88657a;
  --color-dark-potion-700: #6d5162;
  --color-dark-potion-800: #503b48;
  --color-dark-potion-900: #382832;
  --color-dark-potion-950: #22161e;
}

SCSS

$dark-potion: #603e53;
$dark-potion-rgb: 96, 62, 83;
$dark-potion-light: mix(#fff, $dark-potion, 20%);
$dark-potion-dark: mix(#000, $dark-potion, 20%);

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