Terracotta Chip

CSS

:root {
  --terracotta-chip: #c47c5e;
  --terracotta-chip-rgb: 196 124 94;
  --terracotta-chip-oklch: oklch(0.655 0.1 43.3);
}

.element {
  color: var(--terracotta-chip);
  background-color: hsl(18 46% 57%);
  border-color: oklch(0.655 0.1 43.3);
}

Tailwind CSS v4

@theme {
  --color-terracotta-chip: #c47c5e;
  --color-terracotta-chip-50: #ffedde;
  --color-terracotta-chip-100: #ffdecd;
  --color-terracotta-chip-200: #fac8b1;
  --color-terracotta-chip-300: #e3a88d;
  --color-terracotta-chip-400: #d08b6e;
  --color-terracotta-chip-500: #bd6f4e;
  --color-terracotta-chip-600: #9f5e43;
  --color-terracotta-chip-700: #804b35;
  --color-terracotta-chip-800: #5f3626;
  --color-terracotta-chip-900: #432519;
  --color-terracotta-chip-950: #2b130a;
}

SCSS

$terracotta-chip: #c47c5e;
$terracotta-chip-rgb: 196, 124, 94;
$terracotta-chip-light: mix(#fff, $terracotta-chip, 20%);
$terracotta-chip-dark: mix(#000, $terracotta-chip, 20%);

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