Kincha Brown

CSS

:root {
  --kincha-brown: #c66b27;
  --kincha-brown-rgb: 198 107 39;
  --kincha-brown-oklch: oklch(0.621 0.139 52.9);
}

.element {
  color: var(--kincha-brown);
  background-color: hsl(26 67% 46%);
  border-color: oklch(0.621 0.139 52.9);
}

Tailwind CSS v4

@theme {
  --color-kincha-brown: #c66b27;
  --color-kincha-brown-50: #ffecd0;
  --color-kincha-brown-100: #ffdcbc;
  --color-kincha-brown-200: #ffc59b;
  --color-kincha-brown-300: #efa470;
  --color-kincha-brown-400: #de8549;
  --color-kincha-brown-500: #cb670e;
  --color-kincha-brown-600: #ab5712;
  --color-kincha-brown-700: #8a460f;
  --color-kincha-brown-800: #67310b;
  --color-kincha-brown-900: #482207;
  --color-kincha-brown-950: #2f1000;
}

SCSS

$kincha-brown: #c66b27;
$kincha-brown-rgb: 198, 107, 39;
$kincha-brown-light: mix(#fff, $kincha-brown, 20%);
$kincha-brown-dark: mix(#000, $kincha-brown, 20%);

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