Cowgirl Blue

CSS

:root {
  --cowgirl-blue: #6a87ab;
  --cowgirl-blue-rgb: 106 135 171;
  --cowgirl-blue-oklch: oklch(0.615 0.064 254.1);
}

.element {
  color: var(--cowgirl-blue);
  background-color: hsl(213 28% 54%);
  border-color: oklch(0.615 0.064 254.1);
}

Tailwind CSS v4

@theme {
  --color-cowgirl-blue: #6a87ab;
  --color-cowgirl-blue-50: #eaf6ff;
  --color-cowgirl-blue-100: #dae9fe;
  --color-cowgirl-blue-200: #c3d6f0;
  --color-cowgirl-blue-300: #a2b9d9;
  --color-cowgirl-blue-400: #85a1c4;
  --color-cowgirl-blue-500: #6989b0;
  --color-cowgirl-blue-600: #597495;
  --color-cowgirl-blue-700: #475d77;
  --color-cowgirl-blue-800: #324458;
  --color-cowgirl-blue-900: #222f3e;
  --color-cowgirl-blue-950: #111b27;
}

SCSS

$cowgirl-blue: #6a87ab;
$cowgirl-blue-rgb: 106, 135, 171;
$cowgirl-blue-light: mix(#fff, $cowgirl-blue, 20%);
$cowgirl-blue-dark: mix(#000, $cowgirl-blue, 20%);

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