Cat Nose

CSS

:root {
  --cat-nose: #ecbac0;
  --cat-nose-rgb: 236 186 192;
  --cat-nose-oklch: oklch(0.835 0.058 10.3);
}

.element {
  color: var(--cat-nose);
  background-color: hsl(353 57% 83%);
  border-color: oklch(0.835 0.058 10.3);
}

Tailwind CSS v4

@theme {
  --color-cat-nose: #ecbac0;
  --color-cat-nose-50: #ffeff0;
  --color-cat-nose-100: #fbe0e2;
  --color-cat-nose-200: #eccbcd;
  --color-cat-nose-300: #d3acaf;
  --color-cat-nose-400: #be9196;
  --color-cat-nose-500: #a9767d;
  --color-cat-nose-600: #8f646a;
  --color-cat-nose-700: #725055;
  --color-cat-nose-800: #543a3e;
  --color-cat-nose-900: #3b282b;
  --color-cat-nose-950: #251618;
}

SCSS

$cat-nose: #ecbac0;
$cat-nose-rgb: 236, 186, 192;
$cat-nose-light: mix(#fff, $cat-nose, 20%);
$cat-nose-dark: mix(#000, $cat-nose, 20%);

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