Sinoper Red

CSS

:root {
  --sinoper-red: #bb1111;
  --sinoper-red-rgb: 187 17 17;
  --sinoper-red-oklch: oklch(0.503 0.198 28.4);
}

.element {
  color: var(--sinoper-red);
  background-color: hsl(0 83% 40%);
  border-color: oklch(0.503 0.198 28.4);
}

Tailwind CSS v4

@theme {
  --color-sinoper-red: #bb1111;
  --color-sinoper-red-50: #ffe1d3;
  --color-sinoper-red-100: #ffd0c0;
  --color-sinoper-red-200: #ffb3a1;
  --color-sinoper-red-300: #ff8d78;
  --color-sinoper-red-400: #fe6657;
  --color-sinoper-red-500: #ed382e;
  --color-sinoper-red-600: #c83229;
  --color-sinoper-red-700: #a12821;
  --color-sinoper-red-800: #781a19;
  --color-sinoper-red-900: #551210;
  --color-sinoper-red-950: #390204;
}

SCSS

$sinoper-red: #bb1111;
$sinoper-red-rgb: 187, 17, 17;
$sinoper-red-light: mix(#fff, $sinoper-red, 20%);
$sinoper-red-dark: mix(#000, $sinoper-red, 20%);

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