Bricks of Hope

CSS

:root {
  --bricks-of-hope: #db5856;
  --bricks-of-hope-rgb: 219 88 86;
  --bricks-of-hope-oklch: oklch(0.63 0.165 23.9);
}

.element {
  color: var(--bricks-of-hope);
  background-color: hsl(1 65% 60%);
  border-color: oklch(0.63 0.165 23.9);
}

Tailwind CSS v4

@theme {
  --color-bricks-of-hope: #db5856;
  --color-bricks-of-hope-50: #ffe4dd;
  --color-bricks-of-hope-100: #ffd3cb;
  --color-bricks-of-hope-200: #ffb9af;
  --color-bricks-of-hope-300: #ff948b;
  --color-bricks-of-hope-400: #f0726d;
  --color-bricks-of-hope-500: #de4d4d;
  --color-bricks-of-hope-600: #bc4242;
  --color-bricks-of-hope-700: #973534;
  --color-bricks-of-hope-800: #712527;
  --color-bricks-of-hope-900: #50191a;
  --color-bricks-of-hope-950: #34080b;
}

SCSS

$bricks-of-hope: #db5856;
$bricks-of-hope-rgb: 219, 88, 86;
$bricks-of-hope-light: mix(#fff, $bricks-of-hope, 20%);
$bricks-of-hope-dark: mix(#000, $bricks-of-hope, 20%);

.element {
  color: $bricks-of-hope;
  box-shadow: 0 0 0 2px rgba($bricks-of-hope, 0.35);
}