Pale Cordovan

CSS

:root {
  --pale-cordovan: #ad6e44;
  --pale-cordovan-rgb: 173 110 68;
  --pale-cordovan-oklch: oklch(0.597 0.099 53.4);
}

.element {
  color: var(--pale-cordovan);
  background-color: hsl(24 44% 47%);
  border-color: oklch(0.597 0.099 53.4);
}

Tailwind CSS v4

@theme {
  --color-pale-cordovan: #ad6e44;
  --color-pale-cordovan-50: #ffefdb;
  --color-pale-cordovan-100: #ffe0c9;
  --color-pale-cordovan-200: #f6caac;
  --color-pale-cordovan-300: #dfab87;
  --color-pale-cordovan-400: #cc8e66;
  --color-pale-cordovan-500: #b97343;
  --color-pale-cordovan-600: #9c613a;
  --color-pale-cordovan-700: #7d4e2e;
  --color-pale-cordovan-800: #5d3821;
  --color-pale-cordovan-900: #412616;
  --color-pale-cordovan-950: #2a1407;
}

SCSS

$pale-cordovan: #ad6e44;
$pale-cordovan-rgb: 173, 110, 68;
$pale-cordovan-light: mix(#fff, $pale-cordovan, 20%);
$pale-cordovan-dark: mix(#000, $pale-cordovan, 20%);

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