Corinthian Pink

CSS

:root {
  --corinthian-pink: #ffa6d9;
  --corinthian-pink-rgb: 255 166 217;
  --corinthian-pink-oklch: oklch(0.828 0.122 344.7);
}

.element {
  color: var(--corinthian-pink);
  background-color: hsl(326 100% 83%);
  border-color: oklch(0.828 0.122 344.7);
}

Tailwind CSS v4

@theme {
  --color-corinthian-pink: #ffa6d9;
  --color-corinthian-pink-50: #ffe8fc;
  --color-corinthian-pink-100: #ffd8f0;
  --color-corinthian-pink-200: #fcc0df;
  --color-corinthian-pink-300: #e69ec4;
  --color-corinthian-pink-400: #d180af;
  --color-corinthian-pink-500: #bd6299;
  --color-corinthian-pink-600: #a05381;
  --color-corinthian-pink-700: #804367;
  --color-corinthian-pink-800: #5f304e;
  --color-corinthian-pink-900: #422036;
  --color-corinthian-pink-950: #2a1021;
}

SCSS

$corinthian-pink: #ffa6d9;
$corinthian-pink-rgb: 255, 166, 217;
$corinthian-pink-light: mix(#fff, $corinthian-pink, 20%);
$corinthian-pink-dark: mix(#000, $corinthian-pink, 20%);

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