Sienna Sky

CSS

:root {
  --sienna-sky: #bc735a;
  --sienna-sky-rgb: 188 115 90;
  --sienna-sky-oklch: oklch(0.629 0.1 39.6);
}

.element {
  color: var(--sienna-sky);
  background-color: hsl(15 42% 55%);
  border-color: oklch(0.629 0.1 39.6);
}

Tailwind CSS v4

@theme {
  --color-sienna-sky: #bc735a;
  --color-sienna-sky-50: #ffeddf;
  --color-sienna-sky-100: #ffdecf;
  --color-sienna-sky-200: #fac7b4;
  --color-sienna-sky-300: #e4a790;
  --color-sienna-sky-400: #d18a72;
  --color-sienna-sky-500: #be6e52;
  --color-sienna-sky-600: #a05d46;
  --color-sienna-sky-700: #814a38;
  --color-sienna-sky-800: #603529;
  --color-sienna-sky-900: #43241b;
  --color-sienna-sky-950: #2b130c;
}

SCSS

$sienna-sky: #bc735a;
$sienna-sky-rgb: 188, 115, 90;
$sienna-sky-light: mix(#fff, $sienna-sky, 20%);
$sienna-sky-dark: mix(#000, $sienna-sky, 20%);

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