Lower Lip

CSS

:root {
  --lower-lip: #f7468a;
  --lower-lip-rgb: 247 70 138;
  --lower-lip-oklch: oklch(0.667 0.218 1.9);
}

.element {
  color: var(--lower-lip);
  background-color: hsl(337 92% 62%);
  border-color: oklch(0.667 0.218 1.9);
}

Tailwind CSS v4

@theme {
  --color-lower-lip: #f7468a;
  --color-lower-lip-50: #ffdcee;
  --color-lower-lip-100: #ffc9e0;
  --color-lower-lip-200: #ffabca;
  --color-lower-lip-300: #ff82ab;
  --color-lower-lip-400: #ff5995;
  --color-lower-lip-500: #ee1c7b;
  --color-lower-lip-600: #c91d68;
  --color-lower-lip-700: #a21853;
  --color-lower-lip-800: #780f3f;
  --color-lower-lip-900: #550a2c;
  --color-lower-lip-950: #390019;
}

SCSS

$lower-lip: #f7468a;
$lower-lip-rgb: 247, 70, 138;
$lower-lip-light: mix(#fff, $lower-lip, 20%);
$lower-lip-dark: mix(#000, $lower-lip, 20%);

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