Wild Currant

CSS

:root {
  --wild-currant: #7c3239;
  --wild-currant-rgb: 124 50 57;
  --wild-currant-oklch: oklch(0.422 0.103 16.9);
}

.element {
  color: var(--wild-currant);
  background-color: hsl(354 43% 34%);
  border-color: oklch(0.422 0.103 16.9);
}

Tailwind CSS v4

@theme {
  --color-wild-currant: #7c3239;
  --color-wild-currant-50: #ffeaea;
  --color-wild-currant-100: #ffdbda;
  --color-wild-currant-200: #fec3c3;
  --color-wild-currant-300: #e8a2a3;
  --color-wild-currant-400: #d48589;
  --color-wild-currant-500: #c1686d;
  --color-wild-currant-600: #a3585d;
  --color-wild-currant-700: #83464a;
  --color-wild-currant-800: #613337;
  --color-wild-currant-900: #442225;
  --color-wild-currant-950: #2c1114;
}

SCSS

$wild-currant: #7c3239;
$wild-currant-rgb: 124, 50, 57;
$wild-currant-light: mix(#fff, $wild-currant, 20%);
$wild-currant-dark: mix(#000, $wild-currant, 20%);

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