Kitchen Terra Cotta

CSS

:root {
  --kitchen-terra-cotta: #c0816e;
  --kitchen-terra-cotta-rgb: 192 129 110;
  --kitchen-terra-cotta-oklch: oklch(0.663 0.084 37.5);
}

.element {
  color: var(--kitchen-terra-cotta);
  background-color: hsl(14 39% 59%);
  border-color: oklch(0.663 0.084 37.5);
}

Tailwind CSS v4

@theme {
  --color-kitchen-terra-cotta: #c0816e;
  --color-kitchen-terra-cotta-50: #ffeee4;
  --color-kitchen-terra-cotta-100: #ffdfd4;
  --color-kitchen-terra-cotta-200: #f5c9ba;
  --color-kitchen-terra-cotta-300: #dea998;
  --color-kitchen-terra-cotta-400: #ca8d7b;
  --color-kitchen-terra-cotta-500: #b6725e;
  --color-kitchen-terra-cotta-600: #9a6150;
  --color-kitchen-terra-cotta-700: #7b4d3f;
  --color-kitchen-terra-cotta-800: #5c382e;
  --color-kitchen-terra-cotta-900: #40261f;
  --color-kitchen-terra-cotta-950: #29140f;
}

SCSS

$kitchen-terra-cotta: #c0816e;
$kitchen-terra-cotta-rgb: 192, 129, 110;
$kitchen-terra-cotta-light: mix(#fff, $kitchen-terra-cotta, 20%);
$kitchen-terra-cotta-dark: mix(#000, $kitchen-terra-cotta, 20%);

.element {
  color: $kitchen-terra-cotta;
  box-shadow: 0 0 0 2px rgba($kitchen-terra-cotta, 0.35);
}