Flier Lie

CSS

:root {
  --flier-lie: #cdb891;
  --flier-lie-rgb: 205 184 145;
  --flier-lie-oklch: oklch(0.791 0.058 82.8);
}

.element {
  color: var(--flier-lie);
  background-color: hsl(39 38% 69%);
  border-color: oklch(0.791 0.058 82.8);
}

Tailwind CSS v4

@theme {
  --color-flier-lie: #cdb891;
  --color-flier-lie-50: #fdf4e3;
  --color-flier-lie-100: #f1e7d3;
  --color-flier-lie-200: #e0d3b9;
  --color-flier-lie-300: #c5b696;
  --color-flier-lie-400: #af9c78;
  --color-flier-lie-500: #99835a;
  --color-flier-lie-600: #816f4c;
  --color-flier-lie-700: #68593d;
  --color-flier-lie-800: #4d402b;
  --color-flier-lie-900: #352c1d;
  --color-flier-lie-950: #20190d;
}

SCSS

$flier-lie: #cdb891;
$flier-lie-rgb: 205, 184, 145;
$flier-lie-light: mix(#fff, $flier-lie, 20%);
$flier-lie-dark: mix(#000, $flier-lie, 20%);

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