Ripe Fig

CSS

:root {
  --ripe-fig: #6a5254;
  --ripe-fig-rgb: 106 82 84;
  --ripe-fig-oklch: oklch(0.464 0.032 12.8);
}

.element {
  color: var(--ripe-fig);
  background-color: hsl(355 13% 37%);
  border-color: oklch(0.464 0.032 12.8);
}

Tailwind CSS v4

@theme {
  --color-ripe-fig: #6a5254;
  --color-ripe-fig-50: #fef2f2;
  --color-ripe-fig-100: #f2e4e4;
  --color-ripe-fig-200: #e2cfd0;
  --color-ripe-fig-300: #c7b1b2;
  --color-ripe-fig-400: #b19799;
  --color-ripe-fig-500: #9a7e80;
  --color-ripe-fig-600: #826b6c;
  --color-ripe-fig-700: #695557;
  --color-ripe-fig-800: #4d3e40;
  --color-ripe-fig-900: #352b2c;
  --color-ripe-fig-950: #211819;
}

SCSS

$ripe-fig: #6a5254;
$ripe-fig-rgb: 106, 82, 84;
$ripe-fig-light: mix(#fff, $ripe-fig, 20%);
$ripe-fig-dark: mix(#000, $ripe-fig, 20%);

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