Blue Iguana

CSS

:root {
  --blue-iguana: #539ccc;
  --blue-iguana-rgb: 83 156 204;
  --blue-iguana-oklch: oklch(0.665 0.102 239.6);
}

.element {
  color: var(--blue-iguana);
  background-color: hsl(204 54% 56%);
  border-color: oklch(0.665 0.102 239.6);
}

Tailwind CSS v4

@theme {
  --color-blue-iguana: #539ccc;
  --color-blue-iguana-50: #dcfaff;
  --color-blue-iguana-100: #cbedff;
  --color-blue-iguana-200: #aedbfd;
  --color-blue-iguana-300: #88bee7;
  --color-blue-iguana-400: #62a7d5;
  --color-blue-iguana-500: #3a8ec3;
  --color-blue-iguana-600: #3379a4;
  --color-blue-iguana-700: #296084;
  --color-blue-iguana-800: #1a4761;
  --color-blue-iguana-900: #113144;
  --color-blue-iguana-950: #031d2c;
}

SCSS

$blue-iguana: #539ccc;
$blue-iguana-rgb: 83, 156, 204;
$blue-iguana-light: mix(#fff, $blue-iguana, 20%);
$blue-iguana-dark: mix(#000, $blue-iguana, 20%);

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