Fair and Square

CSS

:root {
  --fair-and-square: #8c9151;
  --fair-and-square-rgb: 140 145 81;
  --fair-and-square-oklch: oklch(0.638 0.087 112.5);
}

.element {
  color: var(--fair-and-square);
  background-color: hsl(65 28% 44%);
  border-color: oklch(0.638 0.087 112.5);
}

Tailwind CSS v4

@theme {
  --color-fair-and-square: #8c9151;
  --color-fair-and-square-50: #f4f9dd;
  --color-fair-and-square-100: #e7eccb;
  --color-fair-and-square-200: #d3d9af;
  --color-fair-and-square-300: #b6bd8a;
  --color-fair-and-square-400: #9fa467;
  --color-fair-and-square-500: #878c44;
  --color-fair-and-square-600: #72773b;
  --color-fair-and-square-700: #5b5f2f;
  --color-fair-and-square-800: #444520;
  --color-fair-and-square-900: #2f3015;
  --color-fair-and-square-950: #1b1c06;
}

SCSS

$fair-and-square: #8c9151;
$fair-and-square-rgb: 140, 145, 81;
$fair-and-square-light: mix(#fff, $fair-and-square, 20%);
$fair-and-square-dark: mix(#000, $fair-and-square, 20%);

.element {
  color: $fair-and-square;
  box-shadow: 0 0 0 2px rgba($fair-and-square, 0.35);
}