Blue Mercury

CSS

:root {
  --blue-mercury: #67a6ac;
  --blue-mercury-rgb: 103 166 172;
  --blue-mercury-oklch: oklch(0.685 0.065 203.5);
}

.element {
  color: var(--blue-mercury);
  background-color: hsl(185 29% 54%);
  border-color: oklch(0.685 0.065 203.5);
}

Tailwind CSS v4

@theme {
  --color-blue-mercury: #67a6ac;
  --color-blue-mercury-50: #e1fbfe;
  --color-blue-mercury-100: #d0eff2;
  --color-blue-mercury-200: #b5dde2;
  --color-blue-mercury-300: #90c2c8;
  --color-blue-mercury-400: #6faab0;
  --color-blue-mercury-500: #4c939a;
  --color-blue-mercury-600: #417c82;
  --color-blue-mercury-700: #346468;
  --color-blue-mercury-800: #24494c;
  --color-blue-mercury-900: #183335;
  --color-blue-mercury-950: #091e20;
}

SCSS

$blue-mercury: #67a6ac;
$blue-mercury-rgb: 103, 166, 172;
$blue-mercury-light: mix(#fff, $blue-mercury, 20%);
$blue-mercury-dark: mix(#000, $blue-mercury, 20%);

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