Emotive Ring

CSS

:root {
  --emotive-ring: #856d70;
  --emotive-ring-rgb: 133 109 112;
  --emotive-ring-oklch: oklch(0.559 0.031 9.6);
}

.element {
  color: var(--emotive-ring);
  background-color: hsl(353 10% 47%);
  border-color: oklch(0.559 0.031 9.6);
}

Tailwind CSS v4

@theme {
  --color-emotive-ring: #856d70;
  --color-emotive-ring-50: #fef2f3;
  --color-emotive-ring-100: #f2e4e5;
  --color-emotive-ring-200: #e1cfd1;
  --color-emotive-ring-300: #c7b1b3;
  --color-emotive-ring-400: #b0979a;
  --color-emotive-ring-500: #997e82;
  --color-emotive-ring-600: #826b6e;
  --color-emotive-ring-700: #685558;
  --color-emotive-ring-800: #4c3e40;
  --color-emotive-ring-900: #352b2c;
  --color-emotive-ring-950: #201819;
}

SCSS

$emotive-ring: #856d70;
$emotive-ring-rgb: 133, 109, 112;
$emotive-ring-light: mix(#fff, $emotive-ring, 20%);
$emotive-ring-dark: mix(#000, $emotive-ring, 20%);

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