Blue Pointer

CSS

:root {
  --blue-pointer: #95b9d6;
  --blue-pointer-rgb: 149 185 214;
  --blue-pointer-oklch: oklch(0.769 0.057 242.8);
}

.element {
  color: var(--blue-pointer);
  background-color: hsl(207 44% 71%);
  border-color: oklch(0.769 0.057 242.8);
}

Tailwind CSS v4

@theme {
  --color-blue-pointer: #95b9d6;
  --color-blue-pointer-50: #e8f7ff;
  --color-blue-pointer-100: #d9eafa;
  --color-blue-pointer-200: #c1d7ec;
  --color-blue-pointer-300: #a0bbd3;
  --color-blue-pointer-400: #82a3be;
  --color-blue-pointer-500: #658ba9;
  --color-blue-pointer-600: #56768f;
  --color-blue-pointer-700: #445e73;
  --color-blue-pointer-800: #304554;
  --color-blue-pointer-900: #21303b;
  --color-blue-pointer-950: #101c25;
}

SCSS

$blue-pointer: #95b9d6;
$blue-pointer-rgb: 149, 185, 214;
$blue-pointer-light: mix(#fff, $blue-pointer, 20%);
$blue-pointer-dark: mix(#000, $blue-pointer, 20%);

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