Kiss and Tell

CSS

:root {
  --kiss-and-tell: #d86773;
  --kiss-and-tell-rgb: 216 103 115;
  --kiss-and-tell-oklch: oklch(0.652 0.142 15.3);
}

.element {
  color: var(--kiss-and-tell);
  background-color: hsl(354 59% 63%);
  border-color: oklch(0.652 0.142 15.3);
}

Tailwind CSS v4

@theme {
  --color-kiss-and-tell: #d86773;
  --color-kiss-and-tell-50: #ffe6e6;
  --color-kiss-and-tell-100: #ffd5d7;
  --color-kiss-and-tell-200: #ffbcbe;
  --color-kiss-and-tell-300: #f7999d;
  --color-kiss-and-tell-400: #e57883;
  --color-kiss-and-tell-500: #d35767;
  --color-kiss-and-tell-600: #b24b57;
  --color-kiss-and-tell-700: #8f3c45;
  --color-kiss-and-tell-800: #6a2a34;
  --color-kiss-and-tell-900: #4b1c23;
  --color-kiss-and-tell-950: #310c12;
}

SCSS

$kiss-and-tell: #d86773;
$kiss-and-tell-rgb: 216, 103, 115;
$kiss-and-tell-light: mix(#fff, $kiss-and-tell, 20%);
$kiss-and-tell-dark: mix(#000, $kiss-and-tell, 20%);

.element {
  color: $kiss-and-tell;
  box-shadow: 0 0 0 2px rgba($kiss-and-tell, 0.35);
}