Tiffany Amber

CSS

:root {
  --tiffany-amber: #b58141;
  --tiffany-amber-rgb: 181 129 65;
  --tiffany-amber-oklch: oklch(0.642 0.103 69.8);
}

.element {
  color: var(--tiffany-amber);
  background-color: hsl(33 47% 48%);
  border-color: oklch(0.642 0.103 69.8);
}

Tailwind CSS v4

@theme {
  --color-tiffany-amber: #b58141;
  --color-tiffany-amber-50: #fff1d6;
  --color-tiffany-amber-100: #fee3c3;
  --color-tiffany-amber-200: #f0cea4;
  --color-tiffany-amber-300: #d9af7c;
  --color-tiffany-amber-400: #c69358;
  --color-tiffany-amber-500: #b1792e;
  --color-tiffany-amber-600: #966629;
  --color-tiffany-amber-700: #785220;
  --color-tiffany-amber-800: #5a3b16;
  --color-tiffany-amber-900: #3f280e;
  --color-tiffany-amber-950: #281602;
}

SCSS

$tiffany-amber: #b58141;
$tiffany-amber-rgb: 181, 129, 65;
$tiffany-amber-light: mix(#fff, $tiffany-amber, 20%);
$tiffany-amber-dark: mix(#000, $tiffany-amber, 20%);

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