Cautious Blue

CSS

:root {
  --cautious-blue: #d5dde5;
  --cautious-blue-rgb: 213 221 229;
  --cautious-blue-oklch: oklch(0.894 0.014 248);
}

.element {
  color: var(--cautious-blue);
  background-color: hsl(210 24% 87%);
  border-color: oklch(0.894 0.014 248);
}

Tailwind CSS v4

@theme {
  --color-cautious-blue: #d5dde5;
  --color-cautious-blue-50: #f2f5f9;
  --color-cautious-blue-100: #e4e8ec;
  --color-cautious-blue-200: #d0d5da;
  --color-cautious-blue-300: #b2b8be;
  --color-cautious-blue-400: #989fa6;
  --color-cautious-blue-500: #7f878f;
  --color-cautious-blue-600: #6c7279;
  --color-cautious-blue-700: #565b61;
  --color-cautious-blue-800: #3f4347;
  --color-cautious-blue-900: #2b2e31;
  --color-cautious-blue-950: #181b1d;
}

SCSS

$cautious-blue: #d5dde5;
$cautious-blue-rgb: 213, 221, 229;
$cautious-blue-light: mix(#fff, $cautious-blue, 20%);
$cautious-blue-dark: mix(#000, $cautious-blue, 20%);

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