Hagar Shores

CSS

:root {
  --hagar-shores: #e6c9a3;
  --hagar-shores-rgb: 230 201 163;
  --hagar-shores-oklch: oklch(0.851 0.06 74.3);
}

.element {
  color: var(--hagar-shores);
  background-color: hsl(34 57% 77%);
  border-color: oklch(0.851 0.06 74.3);
}

Tailwind CSS v4

@theme {
  --color-hagar-shores: #e6c9a3;
  --color-hagar-shores-50: #fff3e3;
  --color-hagar-shores-100: #f4e6d2;
  --color-hagar-shores-200: #e3d1b8;
  --color-hagar-shores-300: #c9b496;
  --color-hagar-shores-400: #b49a77;
  --color-hagar-shores-500: #9e8159;
  --color-hagar-shores-600: #866d4c;
  --color-hagar-shores-700: #6b573c;
  --color-hagar-shores-800: #4f3f2b;
  --color-hagar-shores-900: #372b1d;
  --color-hagar-shores-950: #22190d;
}

SCSS

$hagar-shores: #e6c9a3;
$hagar-shores-rgb: 230, 201, 163;
$hagar-shores-light: mix(#fff, $hagar-shores, 20%);
$hagar-shores-dark: mix(#000, $hagar-shores, 20%);

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