#3696B5

CSS

:root {
  --enchanted-well: #3696b5;
  --enchanted-well-rgb: 54 150 181;
  --enchanted-well-oklch: oklch(0.63 0.099 223.3);
}

.element {
  color: var(--enchanted-well);
  background-color: hsl(195 54% 46%);
  border-color: oklch(0.63 0.099 223.3);
}

Tailwind CSS v4

@theme {
  --color-enchanted-well: #3696b5;
  --color-enchanted-well-50: #d8fcff;
  --color-enchanted-well-100: #c6f0ff;
  --color-enchanted-well-200: #a7def5;
  --color-enchanted-well-300: #7ec2de;
  --color-enchanted-well-400: #55abc9;
  --color-enchanted-well-500: #1e94b6;
  --color-enchanted-well-600: #1e7d9a;
  --color-enchanted-well-700: #18647b;
  --color-enchanted-well-800: #0d4a5a;
  --color-enchanted-well-900: #08333f;
  --color-enchanted-well-950: #001f28;
}

SCSS

$enchanted-well: #3696b5;
$enchanted-well-rgb: 54, 150, 181;
$enchanted-well-light: mix(#fff, $enchanted-well, 20%);
$enchanted-well-dark: mix(#000, $enchanted-well, 20%);

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