Green Darner Tail

CSS

:root {
  --green-darner-tail: #75bbfd;
  --green-darner-tail-rgb: 117 187 253;
  --green-darner-tail-oklch: oklch(0.772 0.119 248.2);
}

.element {
  color: var(--green-darner-tail);
  background-color: hsl(209 97% 73%);
  border-color: oklch(0.772 0.119 248.2);
}

Tailwind CSS v4

@theme {
  --color-green-darner-tail: #75bbfd;
  --color-green-darner-tail-50: #dcf9ff;
  --color-green-darner-tail-100: #cbecff;
  --color-green-darner-tail-200: #aed9ff;
  --color-green-darner-tail-300: #89bcf2;
  --color-green-darner-tail-400: #63a4e1;
  --color-green-darner-tail-500: #3c8bd0;
  --color-green-darner-tail-600: #3476b0;
  --color-green-darner-tail-700: #2a5e8d;
  --color-green-darner-tail-800: #1a4569;
  --color-green-darner-tail-900: #11304a;
  --color-green-darner-tail-950: #031c30;
}

SCSS

$green-darner-tail: #75bbfd;
$green-darner-tail-rgb: 117, 187, 253;
$green-darner-tail-light: mix(#fff, $green-darner-tail, 20%);
$green-darner-tail-dark: mix(#000, $green-darner-tail, 20%);

.element {
  color: $green-darner-tail;
  box-shadow: 0 0 0 2px rgba($green-darner-tail, 0.35);
}