Misty Grape

CSS

:root {
  --misty-grape: #65434d;
  --misty-grape-rgb: 101 67 77;
  --misty-grape-oklch: oklch(0.425 0.049 0.2);
}

.element {
  color: var(--misty-grape);
  background-color: hsl(342 20% 33%);
  border-color: oklch(0.425 0.049 0.2);
}

Tailwind CSS v4

@theme {
  --color-misty-grape: #65434d;
  --color-misty-grape-50: #fff0f4;
  --color-misty-grape-100: #f7e1e6;
  --color-misty-grape-200: #e8ccd2;
  --color-misty-grape-300: #ceadb5;
  --color-misty-grape-400: #b8939d;
  --color-misty-grape-500: #a27985;
  --color-misty-grape-600: #896670;
  --color-misty-grape-700: #6e525a;
  --color-misty-grape-800: #513b42;
  --color-misty-grape-900: #38292e;
  --color-misty-grape-950: #23171a;
}

SCSS

$misty-grape: #65434d;
$misty-grape-rgb: 101, 67, 77;
$misty-grape-light: mix(#fff, $misty-grape, 20%);
$misty-grape-dark: mix(#000, $misty-grape, 20%);

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