British Shorthair

CSS

:root {
  --british-shorthair: #5f6672;
  --british-shorthair-rgb: 95 102 114;
  --british-shorthair-oklch: oklch(0.508 0.021 261.3);
}

.element {
  color: var(--british-shorthair);
  background-color: hsl(218 9% 41%);
  border-color: oklch(0.508 0.021 261.3);
}

Tailwind CSS v4

@theme {
  --color-british-shorthair: #5f6672;
  --color-british-shorthair-50: #f2f5fb;
  --color-british-shorthair-100: #e4e8ef;
  --color-british-shorthair-200: #d0d4dd;
  --color-british-shorthair-300: #b2b8c2;
  --color-british-shorthair-400: #989fab;
  --color-british-shorthair-500: #7e8794;
  --color-british-shorthair-600: #6b727e;
  --color-british-shorthair-700: #565b65;
  --color-british-shorthair-800: #3e434a;
  --color-british-shorthair-900: #2b2e33;
  --color-british-shorthair-950: #181b1f;
}

SCSS

$british-shorthair: #5f6672;
$british-shorthair-rgb: 95, 102, 114;
$british-shorthair-light: mix(#fff, $british-shorthair, 20%);
$british-shorthair-dark: mix(#000, $british-shorthair, 20%);

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