Little Bow Pink

CSS

:root {
  --little-bow-pink: #d37c99;
  --little-bow-pink-rgb: 211 124 153;
  --little-bow-pink-oklch: oklch(0.688 0.113 359.1);
}

.element {
  color: var(--little-bow-pink);
  background-color: hsl(340 50% 66%);
  border-color: oklch(0.688 0.113 359.1);
}

Tailwind CSS v4

@theme {
  --color-little-bow-pink: #d37c99;
  --color-little-bow-pink-50: #ffe8f3;
  --color-little-bow-pink-100: #ffd9e5;
  --color-little-bow-pink-200: #fec1d1;
  --color-little-bow-pink-300: #e89fb4;
  --color-little-bow-pink-400: #d5819d;
  --color-little-bow-pink-500: #c16484;
  --color-little-bow-pink-600: #a35570;
  --color-little-bow-pink-700: #83445a;
  --color-little-bow-pink-800: #613143;
  --color-little-bow-pink-900: #44212e;
  --color-little-bow-pink-950: #2c101b;
}

SCSS

$little-bow-pink: #d37c99;
$little-bow-pink-rgb: 211, 124, 153;
$little-bow-pink-light: mix(#fff, $little-bow-pink, 20%);
$little-bow-pink-dark: mix(#000, $little-bow-pink, 20%);

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