Saira Red

CSS

:root {
  --saira-red: #ff9bb7;
  --saira-red-rgb: 255 155 183;
  --saira-red-oklch: oklch(0.799 0.123 2.2);
}

.element {
  color: var(--saira-red);
  background-color: hsl(343 100% 80%);
  border-color: oklch(0.799 0.123 2.2);
}

Tailwind CSS v4

@theme {
  --color-saira-red: #ff9bb7;
  --color-saira-red-50: #ffe7f1;
  --color-saira-red-100: #ffd8e3;
  --color-saira-red-200: #ffbfce;
  --color-saira-red-300: #ed9db0;
  --color-saira-red-400: #da7e98;
  --color-saira-red-500: #c75f7f;
  --color-saira-red-600: #a8516c;
  --color-saira-red-700: #874156;
  --color-saira-red-800: #642e40;
  --color-saira-red-900: #461f2c;
  --color-saira-red-950: #2d0f19;
}

SCSS

$saira-red: #ff9bb7;
$saira-red-rgb: 255, 155, 183;
$saira-red-light: mix(#fff, $saira-red, 20%);
$saira-red-dark: mix(#000, $saira-red, 20%);

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