Cat’s Purr

CSS

:root {
  --cat-s-purr: #0071a0;
  --cat-s-purr-rgb: 0 113 160;
  --cat-s-purr-oklch: oklch(0.519 0.112 236.2);
}

.element {
  color: var(--cat-s-purr);
  background-color: hsl(198 100% 31%);
  border-color: oklch(0.519 0.112 236.2);
}

Tailwind CSS v4

@theme {
  --color-cat-s-purr: #0071a0;
  --color-cat-s-purr-50: #d9fbff;
  --color-cat-s-purr-100: #c6eeff;
  --color-cat-s-purr-200: #a8dcff;
  --color-cat-s-purr-300: #7fc0ea;
  --color-cat-s-purr-400: #56a8d8;
  --color-cat-s-purr-500: #2390c6;
  --color-cat-s-purr-600: #217aa7;
  --color-cat-s-purr-700: #1b6286;
  --color-cat-s-purr-800: #0e4863;
  --color-cat-s-purr-900: #093246;
  --color-cat-s-purr-950: #001e2d;
}

SCSS

$cat-s-purr: #0071a0;
$cat-s-purr-rgb: 0, 113, 160;
$cat-s-purr-light: mix(#fff, $cat-s-purr, 20%);
$cat-s-purr-dark: mix(#000, $cat-s-purr, 20%);

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