Blue Calico

CSS

:root {
  --blue-calico: #a5cde1;
  --blue-calico-rgb: 165 205 225;
  --blue-calico-oklch: oklch(0.826 0.051 229.8);
}

.element {
  color: var(--blue-calico);
  background-color: hsl(200 50% 76%);
  border-color: oklch(0.826 0.051 229.8);
}

Tailwind CSS v4

@theme {
  --color-blue-calico: #a5cde1;
  --color-blue-calico-50: #e7f8ff;
  --color-blue-calico-100: #d8ebf6;
  --color-blue-calico-200: #c0d9e6;
  --color-blue-calico-300: #9ebdcd;
  --color-blue-calico-400: #80a5b7;
  --color-blue-calico-500: #638da2;
  --color-blue-calico-600: #547789;
  --color-blue-calico-700: #435f6d;
  --color-blue-calico-800: #2f4650;
  --color-blue-calico-900: #203038;
  --color-blue-calico-950: #101d22;
}

SCSS

$blue-calico: #a5cde1;
$blue-calico-rgb: 165, 205, 225;
$blue-calico-light: mix(#fff, $blue-calico, 20%);
$blue-calico-dark: mix(#000, $blue-calico, 20%);

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