Brown Rust

CSS

:root {
  --brown-rust: #af593e;
  --brown-rust-rgb: 175 89 62;
  --brown-rust-oklch: oklch(0.562 0.119 38.1);
}

.element {
  color: var(--brown-rust);
  background-color: hsl(14 48% 46%);
  border-color: oklch(0.562 0.119 38.1);
}

Tailwind CSS v4

@theme {
  --color-brown-rust: #af593e;
  --color-brown-rust-50: #ffebdc;
  --color-brown-rust-100: #ffdbca;
  --color-brown-rust-200: #ffc4ae;
  --color-brown-rust-300: #eda389;
  --color-brown-rust-400: #db846a;
  --color-brown-rust-500: #c86748;
  --color-brown-rust-600: #a9573e;
  --color-brown-rust-700: #874631;
  --color-brown-rust-800: #653224;
  --color-brown-rust-900: #472218;
  --color-brown-rust-950: #2e1109;
}

SCSS

$brown-rust: #af593e;
$brown-rust-rgb: 175, 89, 62;
$brown-rust-light: mix(#fff, $brown-rust, 20%);
$brown-rust-dark: mix(#000, $brown-rust, 20%);

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