Gin Still

CSS

:root {
  --gin-still: #ba8e5a;
  --gin-still-rgb: 186 142 90;
  --gin-still-oklch: oklch(0.677 0.087 70.1);
}

.element {
  color: var(--gin-still);
  background-color: hsl(33 41% 54%);
  border-color: oklch(0.677 0.087 70.1);
}

Tailwind CSS v4

@theme {
  --color-gin-still: #ba8e5a;
  --color-gin-still-50: #fff2db;
  --color-gin-still-100: #fbe4c9;
  --color-gin-still-200: #eccfac;
  --color-gin-still-300: #d4b186;
  --color-gin-still-400: #c09664;
  --color-gin-still-500: #ab7b41;
  --color-gin-still-600: #906938;
  --color-gin-still-700: #74542c;
  --color-gin-still-800: #563c1f;
  --color-gin-still-900: #3c2a14;
  --color-gin-still-950: #261706;
}

SCSS

$gin-still: #ba8e5a;
$gin-still-rgb: 186, 142, 90;
$gin-still-light: mix(#fff, $gin-still, 20%);
$gin-still-dark: mix(#000, $gin-still, 20%);

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