Terra Cotta Pot

CSS

:root {
  --terra-cotta-pot: #d38d71;
  --terra-cotta-pot-rgb: 211 141 113;
  --terra-cotta-pot-oklch: oklch(0.707 0.095 42.6);
}

.element {
  color: var(--terra-cotta-pot);
  background-color: hsl(17 53% 64%);
  border-color: oklch(0.707 0.095 42.6);
}

Tailwind CSS v4

@theme {
  --color-terra-cotta-pot: #d38d71;
  --color-terra-cotta-pot-50: #ffeddf;
  --color-terra-cotta-pot-100: #ffdfcf;
  --color-terra-cotta-pot-200: #f8c8b4;
  --color-terra-cotta-pot-300: #e1a890;
  --color-terra-cotta-pot-400: #ce8c71;
  --color-terra-cotta-pot-500: #ba7052;
  --color-terra-cotta-pot-600: #9d5f46;
  --color-terra-cotta-pot-700: #7e4c38;
  --color-terra-cotta-pot-800: #5e3728;
  --color-terra-cotta-pot-900: #42251b;
  --color-terra-cotta-pot-950: #2a140b;
}

SCSS

$terra-cotta-pot: #d38d71;
$terra-cotta-pot-rgb: 211, 141, 113;
$terra-cotta-pot-light: mix(#fff, $terra-cotta-pot, 20%);
$terra-cotta-pot-dark: mix(#000, $terra-cotta-pot, 20%);

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