Blue Tea

CSS

:root {
  --blue-tea: #849da2;
  --blue-tea-rgb: 132 157 162;
  --blue-tea-oklch: oklch(0.678 0.029 211.1);
}

.element {
  color: var(--blue-tea);
  background-color: hsl(190 14% 58%);
  border-color: oklch(0.678 0.029 211.1);
}

Tailwind CSS v4

@theme {
  --color-blue-tea: #849da2;
  --color-blue-tea-50: #ecf7fa;
  --color-blue-tea-100: #deebee;
  --color-blue-tea-200: #c7d8dc;
  --color-blue-tea-300: #a7bcc0;
  --color-blue-tea-400: #8ca3a8;
  --color-blue-tea-500: #718c91;
  --color-blue-tea-600: #5f767b;
  --color-blue-tea-700: #4c5f62;
  --color-blue-tea-800: #374548;
  --color-blue-tea-900: #263032;
  --color-blue-tea-950: #141c1e;
}

SCSS

$blue-tea: #849da2;
$blue-tea-rgb: 132, 157, 162;
$blue-tea-light: mix(#fff, $blue-tea, 20%);
$blue-tea-dark: mix(#000, $blue-tea, 20%);

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