Dash of Curry

CSS

:root {
  --dash-of-curry: #ca6e5f;
  --dash-of-curry-rgb: 202 110 95;
  --dash-of-curry-oklch: oklch(0.639 0.119 30.4);
}

.element {
  color: var(--dash-of-curry);
  background-color: hsl(8 50% 58%);
  border-color: oklch(0.639 0.119 30.4);
}

Tailwind CSS v4

@theme {
  --color-dash-of-curry: #ca6e5f;
  --color-dash-of-curry-50: #ffeae0;
  --color-dash-of-curry-100: #ffdacf;
  --color-dash-of-curry-200: #ffc2b4;
  --color-dash-of-curry-300: #eea191;
  --color-dash-of-curry-400: #dc8273;
  --color-dash-of-curry-500: #c96454;
  --color-dash-of-curry-600: #aa5548;
  --color-dash-of-curry-700: #884439;
  --color-dash-of-curry-800: #65312a;
  --color-dash-of-curry-900: #47211c;
  --color-dash-of-curry-950: #2e100d;
}

SCSS

$dash-of-curry: #ca6e5f;
$dash-of-curry-rgb: 202, 110, 95;
$dash-of-curry-light: mix(#fff, $dash-of-curry, 20%);
$dash-of-curry-dark: mix(#000, $dash-of-curry, 20%);

.element {
  color: $dash-of-curry;
  box-shadow: 0 0 0 2px rgba($dash-of-curry, 0.35);
}