Atomic Pink

CSS

:root {
  --atomic-pink: #fb7efd;
  --atomic-pink-rgb: 251 126 253;
  --atomic-pink-oklch: oklch(0.779 0.213 326.8);
}

.element {
  color: var(--atomic-pink);
  background-color: hsl(299 97% 74%);
  border-color: oklch(0.779 0.213 326.8);
}

Tailwind CSS v4

@theme {
  --color-atomic-pink: #fb7efd;
  --color-atomic-pink-50: #ffe0ff;
  --color-atomic-pink-100: #ffcfff;
  --color-atomic-pink-200: #ffb3ff;
  --color-atomic-pink-300: #f28ced;
  --color-atomic-pink-400: #dd68df;
  --color-atomic-pink-500: #ca3ece;
  --color-atomic-pink-600: #ab37ae;
  --color-atomic-pink-700: #892c8b;
  --color-atomic-pink-800: #641f6a;
  --color-atomic-pink-900: #47144b;
  --color-atomic-pink-950: #2e0531;
}

SCSS

$atomic-pink: #fb7efd;
$atomic-pink-rgb: 251, 126, 253;
$atomic-pink-light: mix(#fff, $atomic-pink, 20%);
$atomic-pink-dark: mix(#000, $atomic-pink, 20%);

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