Scarabœus Nobilis

CSS

:root {
  --scarab-us-nobilis: #7d8c55;
  --scarab-us-nobilis-rgb: 125 140 85;
  --scarab-us-nobilis-oklch: oklch(0.614 0.079 121.2);
}

.element {
  color: var(--scarab-us-nobilis);
  background-color: hsl(76 24% 44%);
  border-color: oklch(0.614 0.079 121.2);
}

Tailwind CSS v4

@theme {
  --color-scarab-us-nobilis: #7d8c55;
  --color-scarab-us-nobilis-50: #f0f9e1;
  --color-scarab-us-nobilis-100: #e2edd0;
  --color-scarab-us-nobilis-200: #cddab5;
  --color-scarab-us-nobilis-300: #afbf92;
  --color-scarab-us-nobilis-400: #97a671;
  --color-scarab-us-nobilis-500: #7e8e51;
  --color-scarab-us-nobilis-600: #6b7845;
  --color-scarab-us-nobilis-700: #556037;
  --color-scarab-us-nobilis-800: #3f4626;
  --color-scarab-us-nobilis-900: #2b3119;
  --color-scarab-us-nobilis-950: #191d0a;
}

SCSS

$scarab-us-nobilis: #7d8c55;
$scarab-us-nobilis-rgb: 125, 140, 85;
$scarab-us-nobilis-light: mix(#fff, $scarab-us-nobilis, 20%);
$scarab-us-nobilis-dark: mix(#000, $scarab-us-nobilis, 20%);

.element {
  color: $scarab-us-nobilis;
  box-shadow: 0 0 0 2px rgba($scarab-us-nobilis, 0.35);
}