Alright Then I Became a Princess

CSS

:root {
  --alright-then-i-became-a-princess: #ffaaa5;
  --alright-then-i-became-a-princess-rgb: 255 170 165;
  --alright-then-i-became-a-princess-oklch: oklch(0.82 0.101 23.2);
}

.element {
  color: var(--alright-then-i-became-a-princess);
  background-color: hsl(3 100% 82%);
  border-color: oklch(0.82 0.101 23.2);
}

Tailwind CSS v4

@theme {
  --color-alright-then-i-became-a-princess: #ffaaa5;
  --color-alright-then-i-became-a-princess-50: #ffebe7;
  --color-alright-then-i-became-a-princess-100: #ffdcd7;
  --color-alright-then-i-became-a-princess-200: #fdc4be;
  --color-alright-then-i-became-a-princess-300: #e7a49d;
  --color-alright-then-i-became-a-princess-400: #d48682;
  --color-alright-then-i-became-a-princess-500: #c06966;
  --color-alright-then-i-became-a-princess-600: #a25a57;
  --color-alright-then-i-became-a-princess-700: #824745;
  --color-alright-then-i-became-a-princess-800: #613333;
  --color-alright-then-i-became-a-princess-900: #442323;
  --color-alright-then-i-became-a-princess-950: #2c1212;
}

SCSS

$alright-then-i-became-a-princess: #ffaaa5;
$alright-then-i-became-a-princess-rgb: 255, 170, 165;
$alright-then-i-became-a-princess-light: mix(#fff, $alright-then-i-became-a-princess, 20%);
$alright-then-i-became-a-princess-dark: mix(#000, $alright-then-i-became-a-princess, 20%);

.element {
  color: $alright-then-i-became-a-princess;
  box-shadow: 0 0 0 2px rgba($alright-then-i-became-a-princess, 0.35);
}