Land of Dreams

CSS

:root {
  --land-of-dreams: #edabe6;
  --land-of-dreams-rgb: 237 171 230;
  --land-of-dreams-oklch: oklch(0.822 0.108 330.2);
}

.element {
  color: var(--land-of-dreams);
  background-color: hsl(306 65% 80%);
  border-color: oklch(0.822 0.108 330.2);
}

Tailwind CSS v4

@theme {
  --color-land-of-dreams: #edabe6;
  --color-land-of-dreams-50: #ffeaff;
  --color-land-of-dreams-100: #ffdbf8;
  --color-land-of-dreams-200: #f1c4e9;
  --color-land-of-dreams-300: #d9a3d0;
  --color-land-of-dreams-400: #c387bd;
  --color-land-of-dreams-500: #ae6aa8;
  --color-land-of-dreams-600: #935a8e;
  --color-land-of-dreams-700: #764872;
  --color-land-of-dreams-800: #563455;
  --color-land-of-dreams-900: #3c233b;
  --color-land-of-dreams-950: #261225;
}

SCSS

$land-of-dreams: #edabe6;
$land-of-dreams-rgb: 237, 171, 230;
$land-of-dreams-light: mix(#fff, $land-of-dreams, 20%);
$land-of-dreams-dark: mix(#000, $land-of-dreams, 20%);

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