Fig Balsamic

CSS

:root {
  --fig-balsamic: #550022;
  --fig-balsamic-rgb: 85 0 34;
  --fig-balsamic-oklch: oklch(0.289 0.116 6.1);
}

.element {
  color: var(--fig-balsamic);
  background-color: hsl(336 100% 17%);
  border-color: oklch(0.289 0.116 6.1);
}

Tailwind CSS v4

@theme {
  --color-fig-balsamic: #550022;
  --color-fig-balsamic-50: #ffe8ef;
  --color-fig-balsamic-100: #ffd9e0;
  --color-fig-balsamic-200: #ffc0cb;
  --color-fig-balsamic-300: #eb9fac;
  --color-fig-balsamic-400: #d88094;
  --color-fig-balsamic-500: #c5627a;
  --color-fig-balsamic-600: #a65468;
  --color-fig-balsamic-700: #854353;
  --color-fig-balsamic-800: #63303e;
  --color-fig-balsamic-900: #45202a;
  --color-fig-balsamic-950: #2d1018;
}

SCSS

$fig-balsamic: #550022;
$fig-balsamic-rgb: 85, 0, 34;
$fig-balsamic-light: mix(#fff, $fig-balsamic, 20%);
$fig-balsamic-dark: mix(#000, $fig-balsamic, 20%);

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