Noble Cause

CSS

:root {
  --noble-cause: #990c0d;
  --noble-cause-rgb: 153 12 13;
  --noble-cause-oklch: oklch(0.434 0.171 28.2);
}

.element {
  color: var(--noble-cause);
  background-color: hsl(360 85% 32%);
  border-color: oklch(0.434 0.171 28.2);
}

Tailwind CSS v4

@theme {
  --color-noble-cause: #990c0d;
  --color-noble-cause-50: #ffe4d8;
  --color-noble-cause-100: #ffd3c6;
  --color-noble-cause-200: #ffb9a9;
  --color-noble-cause-300: #ff9482;
  --color-noble-cause-400: #f27163;
  --color-noble-cause-500: #e14b40;
  --color-noble-cause-600: #be4137;
  --color-noble-cause-700: #99342b;
  --color-noble-cause-800: #722421;
  --color-noble-cause-900: #501815;
  --color-noble-cause-950: #350807;
}

SCSS

$noble-cause: #990c0d;
$noble-cause-rgb: 153, 12, 13;
$noble-cause-light: mix(#fff, $noble-cause, 20%);
$noble-cause-dark: mix(#000, $noble-cause, 20%);

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