Blossoms in Spring

CSS

:root {
  --blossoms-in-spring: #e79acb;
  --blossoms-in-spring-rgb: 231 154 203;
  --blossoms-in-spring-oklch: oklch(0.777 0.111 341.4);
}

.element {
  color: var(--blossoms-in-spring);
  background-color: hsl(322 62% 75%);
  border-color: oklch(0.777 0.111 341.4);
}

Tailwind CSS v4

@theme {
  --color-blossoms-in-spring: #e79acb;
  --color-blossoms-in-spring-50: #ffe9fd;
  --color-blossoms-in-spring-100: #ffdaf1;
  --color-blossoms-in-spring-200: #f7c2e0;
  --color-blossoms-in-spring-300: #e0a1c6;
  --color-blossoms-in-spring-400: #cb84b1;
  --color-blossoms-in-spring-500: #b7679b;
  --color-blossoms-in-spring-600: #9a5783;
  --color-blossoms-in-spring-700: #7c4669;
  --color-blossoms-in-spring-800: #5b324f;
  --color-blossoms-in-spring-900: #402237;
  --color-blossoms-in-spring-950: #291122;
}

SCSS

$blossoms-in-spring: #e79acb;
$blossoms-in-spring-rgb: 231, 154, 203;
$blossoms-in-spring-light: mix(#fff, $blossoms-in-spring, 20%);
$blossoms-in-spring-dark: mix(#000, $blossoms-in-spring, 20%);

.element {
  color: $blossoms-in-spring;
  box-shadow: 0 0 0 2px rgba($blossoms-in-spring, 0.35);
}