Let It Ring

CSS

:root {
  --let-it-ring: #cfae74;
  --let-it-ring-rgb: 207 174 116;
  --let-it-ring-oklch: oklch(0.767 0.085 81);
}

.element {
  color: var(--let-it-ring);
  background-color: hsl(38 49% 63%);
  border-color: oklch(0.767 0.085 81);
}

Tailwind CSS v4

@theme {
  --color-let-it-ring: #cfae74;
  --color-let-it-ring-50: #fff4da;
  --color-let-it-ring-100: #f6e6c9;
  --color-let-it-ring-200: #e6d2ac;
  --color-let-it-ring-300: #cdb486;
  --color-let-it-ring-400: #b89963;
  --color-let-it-ring-500: #a3803f;
  --color-let-it-ring-600: #8a6c37;
  --color-let-it-ring-700: #6e572b;
  --color-let-it-ring-800: #523f1e;
  --color-let-it-ring-900: #392b14;
  --color-let-it-ring-950: #241806;
}

SCSS

$let-it-ring: #cfae74;
$let-it-ring-rgb: 207, 174, 116;
$let-it-ring-light: mix(#fff, $let-it-ring, 20%);
$let-it-ring-dark: mix(#000, $let-it-ring, 20%);

.element {
  color: $let-it-ring;
  box-shadow: 0 0 0 2px rgba($let-it-ring, 0.35);
}