Blue Bobbin

CSS

:root {
  --blue-bobbin: #52b4ca;
  --blue-bobbin-rgb: 82 180 202;
  --blue-bobbin-oklch: oklch(0.72 0.096 214.7);
}

.element {
  color: var(--blue-bobbin);
  background-color: hsl(191 53% 56%);
  border-color: oklch(0.72 0.096 214.7);
}

Tailwind CSS v4

@theme {
  --color-blue-bobbin: #52b4ca;
  --color-blue-bobbin-50: #d7fdff;
  --color-blue-bobbin-100: #c5f1fd;
  --color-blue-bobbin-200: #a6dfef;
  --color-blue-bobbin-300: #7cc4d7;
  --color-blue-bobbin-400: #51adc2;
  --color-blue-bobbin-500: #1496ae;
  --color-blue-bobbin-600: #177f93;
  --color-blue-bobbin-700: #136576;
  --color-blue-bobbin-800: #0a4b56;
  --color-blue-bobbin-900: #07343c;
  --color-blue-bobbin-950: #001f26;
}

SCSS

$blue-bobbin: #52b4ca;
$blue-bobbin-rgb: 82, 180, 202;
$blue-bobbin-light: mix(#fff, $blue-bobbin, 20%);
$blue-bobbin-dark: mix(#000, $blue-bobbin, 20%);

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