Red Square

CSS

:root {
  --red-square: #aa262a;
  --red-square-rgb: 170 38 42;
  --red-square-oklch: oklch(0.486 0.168 24.8);
}

.element {
  color: var(--red-square);
  background-color: hsl(358 63% 41%);
  border-color: oklch(0.486 0.168 24.8);
}

Tailwind CSS v4

@theme {
  --color-red-square: #aa262a;
  --color-red-square-50: #ffe4dc;
  --color-red-square-100: #ffd3ca;
  --color-red-square-200: #ffb8ae;
  --color-red-square-300: #ff9488;
  --color-red-square-400: #f1716b;
  --color-red-square-500: #e04b4a;
  --color-red-square-600: #bd413f;
  --color-red-square-700: #983432;
  --color-red-square-800: #712426;
  --color-red-square-900: #501819;
  --color-red-square-950: #35080a;
}

SCSS

$red-square: #aa262a;
$red-square-rgb: 170, 38, 42;
$red-square-light: mix(#fff, $red-square, 20%);
$red-square-dark: mix(#000, $red-square, 20%);

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