Masoho Red

CSS

:root {
  --masoho-red: #d57c6b;
  --masoho-red-rgb: 213 124 107;
  --masoho-red-oklch: oklch(0.679 0.114 31.7);
}

.element {
  color: var(--masoho-red);
  background-color: hsl(10 56% 63%);
  border-color: oklch(0.679 0.114 31.7);
}

Tailwind CSS v4

@theme {
  --color-masoho-red: #d57c6b;
  --color-masoho-red-50: #ffeae0;
  --color-masoho-red-100: #ffdbcf;
  --color-masoho-red-200: #ffc3b5;
  --color-masoho-red-300: #eca291;
  --color-masoho-red-400: #d98474;
  --color-masoho-red-500: #c66655;
  --color-masoho-red-600: #a75748;
  --color-masoho-red-700: #874639;
  --color-masoho-red-800: #64322a;
  --color-masoho-red-900: #46221c;
  --color-masoho-red-950: #2d110d;
}

SCSS

$masoho-red: #d57c6b;
$masoho-red-rgb: 213, 124, 107;
$masoho-red-light: mix(#fff, $masoho-red, 20%);
$masoho-red-dark: mix(#000, $masoho-red, 20%);

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