Iced Mocha

CSS

:root {
  --iced-mocha: #a3846c;
  --iced-mocha-rgb: 163 132 108;
  --iced-mocha-oklch: oklch(0.636 0.051 59.4);
}

.element {
  color: var(--iced-mocha);
  background-color: hsl(26 23% 53%);
  border-color: oklch(0.636 0.051 59.4);
}

Tailwind CSS v4

@theme {
  --color-iced-mocha: #a3846c;
  --color-iced-mocha-50: #fff2e7;
  --color-iced-mocha-100: #f5e4d7;
  --color-iced-mocha-200: #e5d0bf;
  --color-iced-mocha-300: #cbb29d;
  --color-iced-mocha-400: #b69880;
  --color-iced-mocha-500: #a07e64;
  --color-iced-mocha-600: #876b55;
  --color-iced-mocha-700: #6d5644;
  --color-iced-mocha-800: #503e31;
  --color-iced-mocha-900: #382b21;
  --color-iced-mocha-950: #221811;
}

SCSS

$iced-mocha: #a3846c;
$iced-mocha-rgb: 163, 132, 108;
$iced-mocha-light: mix(#fff, $iced-mocha, 20%);
$iced-mocha-dark: mix(#000, $iced-mocha, 20%);

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