Paris Mint

CSS

:root {
  --paris-mint: #c9c79a;
  --paris-mint-rgb: 201 199 154;
  --paris-mint-oklch: oklch(0.82 0.06 105.5);
}

.element {
  color: var(--paris-mint);
  background-color: hsl(57 30% 70%);
  border-color: oklch(0.82 0.06 105.5);
}

Tailwind CSS v4

@theme {
  --color-paris-mint: #c9c79a;
  --color-paris-mint-50: #f6f7e3;
  --color-paris-mint-100: #e9ead3;
  --color-paris-mint-200: #d6d7b9;
  --color-paris-mint-300: #baba97;
  --color-paris-mint-400: #a3a178;
  --color-paris-mint-500: #8b8959;
  --color-paris-mint-600: #76744c;
  --color-paris-mint-700: #5e5d3d;
  --color-paris-mint-800: #46432b;
  --color-paris-mint-900: #302f1d;
  --color-paris-mint-950: #1d1b0d;
}

SCSS

$paris-mint: #c9c79a;
$paris-mint-rgb: 201, 199, 154;
$paris-mint-light: mix(#fff, $paris-mint, 20%);
$paris-mint-dark: mix(#000, $paris-mint, 20%);

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