Piermont Stone Red

CSS

:root {
  --piermont-stone-red: #43232c;
  --piermont-stone-red-rgb: 67 35 44;
  --piermont-stone-red-oklch: oklch(0.302 0.05 2.5);
}

.element {
  color: var(--piermont-stone-red);
  background-color: hsl(343 31% 20%);
  border-color: oklch(0.302 0.05 2.5);
}

Tailwind CSS v4

@theme {
  --color-piermont-stone-red: #43232c;
  --color-piermont-stone-red-50: #fff0f3;
  --color-piermont-stone-red-100: #f8e1e6;
  --color-piermont-stone-red-200: #e8ccd1;
  --color-piermont-stone-red-300: #cfadb4;
  --color-piermont-stone-red-400: #b9939c;
  --color-piermont-stone-red-500: #a37983;
  --color-piermont-stone-red-600: #8a666f;
  --color-piermont-stone-red-700: #6f5259;
  --color-piermont-stone-red-800: #513b41;
  --color-piermont-stone-red-900: #39292d;
  --color-piermont-stone-red-950: #23161a;
}

SCSS

$piermont-stone-red: #43232c;
$piermont-stone-red-rgb: 67, 35, 44;
$piermont-stone-red-light: mix(#fff, $piermont-stone-red, 20%);
$piermont-stone-red-dark: mix(#000, $piermont-stone-red, 20%);

.element {
  color: $piermont-stone-red;
  box-shadow: 0 0 0 2px rgba($piermont-stone-red, 0.35);
}