Majin Bū Pink

CSS

:root {
  --majin-bu-pink: #ffaacc;
  --majin-bu-pink-rgb: 255 170 204;
  --majin-bu-pink-oklch: oklch(0.83 0.108 354.1);
}

.element {
  color: var(--majin-bu-pink);
  background-color: hsl(336 100% 83%);
  border-color: oklch(0.83 0.108 354.1);
}

Tailwind CSS v4

@theme {
  --color-majin-bu-pink: #ffaacc;
  --color-majin-bu-pink-50: #ffe9f6;
  --color-majin-bu-pink-100: #ffdae9;
  --color-majin-bu-pink-200: #fbc2d6;
  --color-majin-bu-pink-300: #e5a1b9;
  --color-majin-bu-pink-400: #d083a3;
  --color-majin-bu-pink-500: #bc668b;
  --color-majin-bu-pink-600: #9f5776;
  --color-majin-bu-pink-700: #80455e;
  --color-majin-bu-pink-800: #5e3246;
  --color-majin-bu-pink-900: #422231;
  --color-majin-bu-pink-950: #2a111d;
}

SCSS

$majin-bu-pink: #ffaacc;
$majin-bu-pink-rgb: 255, 170, 204;
$majin-bu-pink-light: mix(#fff, $majin-bu-pink, 20%);
$majin-bu-pink-dark: mix(#000, $majin-bu-pink, 20%);

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