Dressed to Impress

CSS

:root {
  --dressed-to-impress: #714640;
  --dressed-to-impress-rgb: 113 70 64;
  --dressed-to-impress-oklch: oklch(0.442 0.061 28.4);
}

.element {
  color: var(--dressed-to-impress);
  background-color: hsl(7 28% 35%);
  border-color: oklch(0.442 0.061 28.4);
}

Tailwind CSS v4

@theme {
  --color-dressed-to-impress: #714640;
  --color-dressed-to-impress-50: #ffefeb;
  --color-dressed-to-impress-100: #fce1dc;
  --color-dressed-to-impress-200: #edcbc5;
  --color-dressed-to-impress-300: #d5ada5;
  --color-dressed-to-impress-400: #c0918a;
  --color-dressed-to-impress-500: #ab776f;
  --color-dressed-to-impress-600: #90655f;
  --color-dressed-to-impress-700: #74514b;
  --color-dressed-to-impress-800: #563a37;
  --color-dressed-to-impress-900: #3c2826;
  --color-dressed-to-impress-950: #251614;
}

SCSS

$dressed-to-impress: #714640;
$dressed-to-impress-rgb: 113, 70, 64;
$dressed-to-impress-light: mix(#fff, $dressed-to-impress, 20%);
$dressed-to-impress-dark: mix(#000, $dressed-to-impress, 20%);

.element {
  color: $dressed-to-impress;
  box-shadow: 0 0 0 2px rgba($dressed-to-impress, 0.35);
}