Inner Child

CSS

:root {
  --inner-child: #f1bdb2;
  --inner-child-rgb: 241 189 178;
  --inner-child-oklch: oklch(0.842 0.062 32.1);
}

.element {
  color: var(--inner-child);
  background-color: hsl(10 69% 82%);
  border-color: oklch(0.842 0.062 32.1);
}

Tailwind CSS v4

@theme {
  --color-inner-child: #f1bdb2;
  --color-inner-child-50: #ffefea;
  --color-inner-child-100: #fce1da;
  --color-inner-child-200: #eecbc3;
  --color-inner-child-300: #d5ada3;
  --color-inner-child-400: #c09188;
  --color-inner-child-500: #ab776c;
  --color-inner-child-600: #91655c;
  --color-inner-child-700: #745149;
  --color-inner-child-800: #563a36;
  --color-inner-child-900: #3c2824;
  --color-inner-child-950: #261613;
}

SCSS

$inner-child: #f1bdb2;
$inner-child-rgb: 241, 189, 178;
$inner-child-light: mix(#fff, $inner-child, 20%);
$inner-child-dark: mix(#000, $inner-child, 20%);

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