Dark Envy

CSS

:root {
  --dark-envy: #a4a582;
  --dark-envy-rgb: 164 165 130;
  --dark-envy-oklch: oklch(0.712 0.049 108.9);
}

.element {
  color: var(--dark-envy);
  background-color: hsl(62 16% 58%);
  border-color: oklch(0.712 0.049 108.9);
}

Tailwind CSS v4

@theme {
  --color-dark-envy: #a4a582;
  --color-dark-envy-50: #f5f7e7;
  --color-dark-envy-100: #e8ead7;
  --color-dark-envy-200: #d5d7bf;
  --color-dark-envy-300: #b8ba9e;
  --color-dark-envy-400: #a0a180;
  --color-dark-envy-500: #888964;
  --color-dark-envy-600: #737455;
  --color-dark-envy-700: #5c5d43;
  --color-dark-envy-800: #444430;
  --color-dark-envy-900: #2f2f21;
  --color-dark-envy-950: #1c1b10;
}

SCSS

$dark-envy: #a4a582;
$dark-envy-rgb: 164, 165, 130;
$dark-envy-light: mix(#fff, $dark-envy, 20%);
$dark-envy-dark: mix(#000, $dark-envy, 20%);

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