Fruit Dove

CSS

:root {
  --fruit-dove: #ca4f70;
  --fruit-dove-rgb: 202 79 112;
  --fruit-dove-oklch: oklch(0.598 0.158 6.6);
}

.element {
  color: var(--fruit-dove);
  background-color: hsl(344 54% 55%);
  border-color: oklch(0.598 0.158 6.6);
}

Tailwind CSS v4

@theme {
  --color-fruit-dove: #ca4f70;
  --color-fruit-dove-50: #ffe3ec;
  --color-fruit-dove-100: #ffd3dd;
  --color-fruit-dove-200: #ffb8c6;
  --color-fruit-dove-300: #fc94a7;
  --color-fruit-dove-400: #ea728f;
  --color-fruit-dove-500: #d84e75;
  --color-fruit-dove-600: #b64363;
  --color-fruit-dove-700: #93364f;
  --color-fruit-dove-800: #6d263b;
  --color-fruit-dove-900: #4d1929;
  --color-fruit-dove-950: #320917;
}

SCSS

$fruit-dove: #ca4f70;
$fruit-dove-rgb: 202, 79, 112;
$fruit-dove-light: mix(#fff, $fruit-dove, 20%);
$fruit-dove-dark: mix(#000, $fruit-dove, 20%);

.element {
  color: $fruit-dove;
  box-shadow: 0 0 0 2px rgba($fruit-dove, 0.35);
}