Blue Ballerina

CSS

:root {
  --blue-ballerina: #b4c7db;
  --blue-ballerina-rgb: 180 199 219;
  --blue-ballerina-oklch: oklch(0.822 0.035 249.6);
}

.element {
  color: var(--blue-ballerina);
  background-color: hsl(211 35% 78%);
  border-color: oklch(0.822 0.035 249.6);
}

Tailwind CSS v4

@theme {
  --color-blue-ballerina: #b4c7db;
  --color-blue-ballerina-50: #eef6ff;
  --color-blue-ballerina-100: #e0e9f4;
  --color-blue-ballerina-200: #cad6e3;
  --color-blue-ballerina-300: #abb9c9;
  --color-blue-ballerina-400: #8fa1b3;
  --color-blue-ballerina-500: #75889d;
  --color-blue-ballerina-600: #637385;
  --color-blue-ballerina-700: #4f5c6a;
  --color-blue-ballerina-800: #39444e;
  --color-blue-ballerina-900: #272f36;
  --color-blue-ballerina-950: #151b21;
}

SCSS

$blue-ballerina: #b4c7db;
$blue-ballerina-rgb: 180, 199, 219;
$blue-ballerina-light: mix(#fff, $blue-ballerina, 20%);
$blue-ballerina-dark: mix(#000, $blue-ballerina, 20%);

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