Pocketful of Posies

CSS

:root {
  --pocketful-of-posies: #c3b8c3;
  --pocketful-of-posies-rgb: 195 184 195;
  --pocketful-of-posies-oklch: oklch(0.795 0.02 325.8);
}

.element {
  color: var(--pocketful-of-posies);
  background-color: hsl(300 8% 74%);
  border-color: oklch(0.795 0.02 325.8);
}

Tailwind CSS v4

@theme {
  --color-pocketful-of-posies: #c3b8c3;
  --color-pocketful-of-posies-50: #f8f3f8;
  --color-pocketful-of-posies-100: #ece6eb;
  --color-pocketful-of-posies-200: #d9d1d8;
  --color-pocketful-of-posies-300: #bdb4bd;
  --color-pocketful-of-posies-400: #a59ba5;
  --color-pocketful-of-posies-500: #8d828d;
  --color-pocketful-of-posies-600: #776e78;
  --color-pocketful-of-posies-700: #605860;
  --color-pocketful-of-posies-800: #464046;
  --color-pocketful-of-posies-900: #302c31;
  --color-pocketful-of-posies-950: #1d191d;
}

SCSS

$pocketful-of-posies: #c3b8c3;
$pocketful-of-posies-rgb: 195, 184, 195;
$pocketful-of-posies-light: mix(#fff, $pocketful-of-posies, 20%);
$pocketful-of-posies-dark: mix(#000, $pocketful-of-posies, 20%);

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