Carob Chip

CSS

:root {
  --carob-chip: #5a484b;
  --carob-chip-rgb: 90 72 75;
  --carob-chip-oklch: oklch(0.421 0.025 7);
}

.element {
  color: var(--carob-chip);
  background-color: hsl(350 11% 32%);
  border-color: oklch(0.421 0.025 7);
}

Tailwind CSS v4

@theme {
  --color-carob-chip: #5a484b;
  --color-carob-chip-50: #fcf2f3;
  --color-carob-chip-100: #f0e5e6;
  --color-carob-chip-200: #ded0d2;
  --color-carob-chip-300: #c4b2b5;
  --color-carob-chip-400: #ac999c;
  --color-carob-chip-500: #968083;
  --color-carob-chip-600: #7f6c6f;
  --color-carob-chip-700: #655659;
  --color-carob-chip-800: #4a3f41;
  --color-carob-chip-900: #342b2d;
  --color-carob-chip-950: #1f191a;
}

SCSS

$carob-chip: #5a484b;
$carob-chip-rgb: 90, 72, 75;
$carob-chip-light: mix(#fff, $carob-chip, 20%);
$carob-chip-dark: mix(#000, $carob-chip, 20%);

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