Diluted Blue

CSS

:root {
  --diluted-blue: #b8def2;
  --diluted-blue-rgb: 184 222 242;
  --diluted-blue-oklch: oklch(0.88 0.049 231);
}

.element {
  color: var(--diluted-blue);
  background-color: hsl(201 69% 84%);
  border-color: oklch(0.88 0.049 231);
}

Tailwind CSS v4

@theme {
  --color-diluted-blue: #b8def2;
  --color-diluted-blue-50: #e8f8ff;
  --color-diluted-blue-100: #d9ebf6;
  --color-diluted-blue-200: #c1d8e6;
  --color-diluted-blue-300: #a0bccd;
  --color-diluted-blue-400: #82a4b6;
  --color-diluted-blue-500: #658ca1;
  --color-diluted-blue-600: #567788;
  --color-diluted-blue-700: #445f6d;
  --color-diluted-blue-800: #314650;
  --color-diluted-blue-900: #213038;
  --color-diluted-blue-950: #101d22;
}

SCSS

$diluted-blue: #b8def2;
$diluted-blue-rgb: 184, 222, 242;
$diluted-blue-light: mix(#fff, $diluted-blue, 20%);
$diluted-blue-dark: mix(#000, $diluted-blue, 20%);

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