Rust Red

CSS

:root {
  --rust-red: #aa2704;
  --rust-red-rgb: 170 39 4;
  --rust-red-oklch: oklch(0.484 0.172 33.9);
}

.element {
  color: var(--rust-red);
  background-color: hsl(13 95% 34%);
  border-color: oklch(0.484 0.172 33.9);
}

Tailwind CSS v4

@theme {
  --color-rust-red: #aa2704;
  --color-rust-red-50: #ffe5d4;
  --color-rust-red-100: #ffd4c1;
  --color-rust-red-200: #ffbaa1;
  --color-rust-red-300: #ff9678;
  --color-rust-red-400: #f27356;
  --color-rust-red-500: #e04d2d;
  --color-rust-red-600: #be4328;
  --color-rust-red-700: #983520;
  --color-rust-red-800: #722518;
  --color-rust-red-900: #50190f;
  --color-rust-red-950: #350803;
}

SCSS

$rust-red: #aa2704;
$rust-red-rgb: 170, 39, 4;
$rust-red-light: mix(#fff, $rust-red, 20%);
$rust-red-dark: mix(#000, $rust-red, 20%);

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