Bara Red

CSS

:root {
  --bara-red: #e9546b;
  --bara-red-rgb: 233 84 107;
  --bara-red-oklch: oklch(0.651 0.184 14.7);
}

.element {
  color: var(--bara-red);
  background-color: hsl(351 77% 62%);
  border-color: oklch(0.651 0.184 14.7);
}

Tailwind CSS v4

@theme {
  --color-bara-red: #e9546b;
  --color-bara-red-50: #ffe1e3;
  --color-bara-red-100: #ffcfd2;
  --color-bara-red-200: #ffb4b8;
  --color-bara-red-300: #ff8d96;
  --color-bara-red-400: #f7697b;
  --color-bara-red-500: #e53e5e;
  --color-bara-red-600: #c23750;
  --color-bara-red-700: #9c2c40;
  --color-bara-red-800: #741e30;
  --color-bara-red-900: #521421;
  --color-bara-red-950: #360410;
}

SCSS

$bara-red: #e9546b;
$bara-red-rgb: 233, 84, 107;
$bara-red-light: mix(#fff, $bara-red, 20%);
$bara-red-dark: mix(#000, $bara-red, 20%);

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