Putnam Plum

CSS

:root {
  --putnam-plum: #8d4362;
  --putnam-plum-rgb: 141 67 98;
  --putnam-plum-oklch: oklch(0.487 0.107 355.4);
}

.element {
  color: var(--putnam-plum);
  background-color: hsl(335 36% 41%);
  border-color: oklch(0.487 0.107 355.4);
}

Tailwind CSS v4

@theme {
  --color-putnam-plum: #8d4362;
  --color-putnam-plum-50: #ffe9f5;
  --color-putnam-plum-100: #ffdae8;
  --color-putnam-plum-200: #fbc2d4;
  --color-putnam-plum-300: #e5a1b8;
  --color-putnam-plum-400: #d083a1;
  --color-putnam-plum-500: #bd6689;
  --color-putnam-plum-600: #9f5774;
  --color-putnam-plum-700: #80455d;
  --color-putnam-plum-800: #5e3245;
  --color-putnam-plum-900: #422230;
  --color-putnam-plum-950: #2a111c;
}

SCSS

$putnam-plum: #8d4362;
$putnam-plum-rgb: 141, 67, 98;
$putnam-plum-light: mix(#fff, $putnam-plum, 20%);
$putnam-plum-dark: mix(#000, $putnam-plum, 20%);

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