Rio Rust

CSS

:root {
  --rio-rust: #926956;
  --rio-rust-rgb: 146 105 86;
  --rio-rust-oklch: oklch(0.558 0.06 45.9);
}

.element {
  color: var(--rio-rust);
  background-color: hsl(19 26% 45%);
  border-color: oklch(0.558 0.06 45.9);
}

Tailwind CSS v4

@theme {
  --color-rio-rust: #926956;
  --color-rio-rust-50: #fff0e7;
  --color-rio-rust-100: #fae2d7;
  --color-rio-rust-200: #ebcdbf;
  --color-rio-rust-300: #d2af9d;
  --color-rio-rust-400: #bd9481;
  --color-rio-rust-500: #a87a64;
  --color-rio-rust-600: #8e6755;
  --color-rio-rust-700: #725344;
  --color-rio-rust-800: #543c31;
  --color-rio-rust-900: #3b2921;
  --color-rio-rust-950: #251711;
}

SCSS

$rio-rust: #926956;
$rio-rust-rgb: 146, 105, 86;
$rio-rust-light: mix(#fff, $rio-rust, 20%);
$rio-rust-dark: mix(#000, $rio-rust, 20%);

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