Pocketful of Promise

CSS

:root {
  --pocketful-of-promise: #e1c7c6;
  --pocketful-of-promise-rgb: 225 199 198;
  --pocketful-of-promise-oklch: oklch(0.851 0.029 20.4);
}

.element {
  color: var(--pocketful-of-promise);
  background-color: hsl(2 31% 83%);
  border-color: oklch(0.851 0.029 20.4);
}

Tailwind CSS v4

@theme {
  --color-pocketful-of-promise: #e1c7c6;
  --color-pocketful-of-promise-50: #fef2f1;
  --color-pocketful-of-promise-100: #f2e4e3;
  --color-pocketful-of-promise-200: #e1d0ce;
  --color-pocketful-of-promise-300: #c6b2b0;
  --color-pocketful-of-promise-400: #af9897;
  --color-pocketful-of-promise-500: #997f7e;
  --color-pocketful-of-promise-600: #816b6b;
  --color-pocketful-of-promise-700: #685655;
  --color-pocketful-of-promise-800: #4c3e3e;
  --color-pocketful-of-promise-900: #352b2b;
  --color-pocketful-of-promise-950: #201818;
}

SCSS

$pocketful-of-promise: #e1c7c6;
$pocketful-of-promise-rgb: 225, 199, 198;
$pocketful-of-promise-light: mix(#fff, $pocketful-of-promise, 20%);
$pocketful-of-promise-dark: mix(#000, $pocketful-of-promise, 20%);

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