#82A8FF

CSS

:root {
  --kitten-s-eye: #82a8ff;
  --kitten-s-eye-rgb: 130 168 255;
  --kitten-s-eye-oklch: oklch(0.74 0.133 265.4);
}

.element {
  color: var(--kitten-s-eye);
  background-color: hsl(222 100% 75%);
  border-color: oklch(0.74 0.133 265.4);
}

Tailwind CSS v4

@theme {
  --color-kitten-s-eye: #82a8ff;
  --color-kitten-s-eye-50: #e4f5ff;
  --color-kitten-s-eye-100: #d4e7ff;
  --color-kitten-s-eye-200: #bbd3ff;
  --color-kitten-s-eye-300: #99b5fc;
  --color-kitten-s-eye-400: #789ced;
  --color-kitten-s-eye-500: #5b81de;
  --color-kitten-s-eye-600: #4d6ebb;
  --color-kitten-s-eye-700: #3d5896;
  --color-kitten-s-eye-800: #2a4170;
  --color-kitten-s-eye-900: #1c2d4f;
  --color-kitten-s-eye-950: #0c1935;
}

SCSS

$kitten-s-eye: #82a8ff;
$kitten-s-eye-rgb: 130, 168, 255;
$kitten-s-eye-light: mix(#fff, $kitten-s-eye, 20%);
$kitten-s-eye-dark: mix(#000, $kitten-s-eye, 20%);

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