Budapest Brown

CSS

:root {
  --budapest-brown: #553d3e;
  --budapest-brown-rgb: 85 61 62;
  --budapest-brown-oklch: oklch(0.387 0.034 16);
}

.element {
  color: var(--budapest-brown);
  background-color: hsl(358 16% 29%);
  border-color: oklch(0.387 0.034 16);
}

Tailwind CSS v4

@theme {
  --color-budapest-brown: #553d3e;
  --color-budapest-brown-50: #fff1f1;
  --color-budapest-brown-100: #f3e4e4;
  --color-budapest-brown-200: #e2cfcf;
  --color-budapest-brown-300: #c8b1b1;
  --color-budapest-brown-400: #b29798;
  --color-budapest-brown-500: #9c7d7e;
  --color-budapest-brown-600: #836a6b;
  --color-budapest-brown-700: #695556;
  --color-budapest-brown-800: #4d3e3f;
  --color-budapest-brown-900: #362a2b;
  --color-budapest-brown-950: #211819;
}

SCSS

$budapest-brown: #553d3e;
$budapest-brown-rgb: 85, 61, 62;
$budapest-brown-light: mix(#fff, $budapest-brown, 20%);
$budapest-brown-dark: mix(#000, $budapest-brown, 20%);

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