Hot Gossip

CSS

:root {
  --hot-gossip: #e07c89;
  --hot-gossip-rgb: 224 124 137;
  --hot-gossip-oklch: oklch(0.7 0.124 12.5);
}

.element {
  color: var(--hot-gossip);
  background-color: hsl(352 62% 68%);
  border-color: oklch(0.7 0.124 12.5);
}

Tailwind CSS v4

@theme {
  --color-hot-gossip: #e07c89;
  --color-hot-gossip-50: #ffe7ea;
  --color-hot-gossip-100: #ffd8db;
  --color-hot-gossip-200: #ffbfc4;
  --color-hot-gossip-300: #f09da3;
  --color-hot-gossip-400: #dd7e8a;
  --color-hot-gossip-500: #ca5f6f;
  --color-hot-gossip-600: #ab515e;
  --color-hot-gossip-700: #89414b;
  --color-hot-gossip-800: #662e38;
  --color-hot-gossip-900: #481f26;
  --color-hot-gossip-950: #2e0e15;
}

SCSS

$hot-gossip: #e07c89;
$hot-gossip-rgb: 224, 124, 137;
$hot-gossip-light: mix(#fff, $hot-gossip, 20%);
$hot-gossip-dark: mix(#000, $hot-gossip, 20%);

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