Red Perfume

CSS

:root {
  --red-perfume: #f6b894;
  --red-perfume-rgb: 246 184 148;
  --red-perfume-oklch: oklch(0.831 0.087 51.3);
}

.element {
  color: var(--red-perfume);
  background-color: hsl(22 84% 77%);
  border-color: oklch(0.831 0.087 51.3);
}

Tailwind CSS v4

@theme {
  --color-red-perfume: #f6b894;
  --color-red-perfume-50: #ffefdf;
  --color-red-perfume-100: #ffe1ce;
  --color-red-perfume-200: #f3cbb2;
  --color-red-perfume-300: #dcac8e;
  --color-red-perfume-400: #c8906f;
  --color-red-perfume-500: #b4754f;
  --color-red-perfume-600: #986343;
  --color-red-perfume-700: #7a4f35;
  --color-red-perfume-800: #5b3926;
  --color-red-perfume-900: #40271a;
  --color-red-perfume-950: #28150a;
}

SCSS

$red-perfume: #f6b894;
$red-perfume-rgb: 246, 184, 148;
$red-perfume-light: mix(#fff, $red-perfume, 20%);
$red-perfume-dark: mix(#000, $red-perfume, 20%);

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