Rare Find

CSS

:root {
  --rare-find: #ac8044;
  --rare-find-rgb: 172 128 68;
  --rare-find-oklch: oklch(0.631 0.095 73.1);
}

.element {
  color: var(--rare-find);
  background-color: hsl(35 43% 47%);
  border-color: oklch(0.631 0.095 73.1);
}

Tailwind CSS v4

@theme {
  --color-rare-find: #ac8044;
  --color-rare-find-50: #fff2d8;
  --color-rare-find-100: #fbe4c6;
  --color-rare-find-200: #eccfa8;
  --color-rare-find-300: #d4b181;
  --color-rare-find-400: #c1965d;
  --color-rare-find-500: #ac7c37;
  --color-rare-find-600: #916930;
  --color-rare-find-700: #745426;
  --color-rare-find-800: #573c1a;
  --color-rare-find-900: #3d2a11;
  --color-rare-find-950: #261704;
}

SCSS

$rare-find: #ac8044;
$rare-find-rgb: 172, 128, 68;
$rare-find-light: mix(#fff, $rare-find, 20%);
$rare-find-dark: mix(#000, $rare-find, 20%);

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