Red Berry

CSS

:root {
  --red-berry: #701f28;
  --red-berry-rgb: 112 31 40;
  --red-berry-oklch: oklch(0.372 0.113 18.4);
}

.element {
  color: var(--red-berry);
  background-color: hsl(353 57% 28%);
  border-color: oklch(0.372 0.113 18.4);
}

Tailwind CSS v4

@theme {
  --color-red-berry: #701f28;
  --color-red-berry-50: #ffe9e8;
  --color-red-berry-100: #ffdad8;
  --color-red-berry-200: #ffc2c0;
  --color-red-berry-300: #eca09f;
  --color-red-berry-400: #d98284;
  --color-red-berry-500: #c66469;
  --color-red-berry-600: #a75559;
  --color-red-berry-700: #864447;
  --color-red-berry-800: #643134;
  --color-red-berry-900: #462124;
  --color-red-berry-950: #2d1013;
}

SCSS

$red-berry: #701f28;
$red-berry-rgb: 112, 31, 40;
$red-berry-light: mix(#fff, $red-berry, 20%);
$red-berry-dark: mix(#000, $red-berry, 20%);

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