Flowers of May

CSS

:root {
  --flowers-of-may: #e3d7e3;
  --flowers-of-may-rgb: 227 215 227;
  --flowers-of-may-oklch: oklch(0.892 0.021 325.7);
}

.element {
  color: var(--flowers-of-may);
  background-color: hsl(300 18% 87%);
  border-color: oklch(0.892 0.021 325.7);
}

Tailwind CSS v4

@theme {
  --color-flowers-of-may: #e3d7e3;
  --color-flowers-of-may-50: #f9f3f8;
  --color-flowers-of-may-100: #ece5eb;
  --color-flowers-of-may-200: #d9d1d9;
  --color-flowers-of-may-300: #bdb4bd;
  --color-flowers-of-may-400: #a59aa5;
  --color-flowers-of-may-500: #8e828e;
  --color-flowers-of-may-600: #786e78;
  --color-flowers-of-may-700: #605860;
  --color-flowers-of-may-800: #464046;
  --color-flowers-of-may-900: #302c31;
  --color-flowers-of-may-950: #1d191d;
}

SCSS

$flowers-of-may: #e3d7e3;
$flowers-of-may-rgb: 227, 215, 227;
$flowers-of-may-light: mix(#fff, $flowers-of-may, 20%);
$flowers-of-may-dark: mix(#000, $flowers-of-may, 20%);

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