Blue Sarong

CSS

:root {
  --blue-sarong: #9ad6e8;
  --blue-sarong-rgb: 154 214 232;
  --blue-sarong-oklch: oklch(0.841 0.066 218.4);
}

.element {
  color: var(--blue-sarong);
  background-color: hsl(194 63% 76%);
  border-color: oklch(0.841 0.066 218.4);
}

Tailwind CSS v4

@theme {
  --color-blue-sarong: #9ad6e8;
  --color-blue-sarong-50: #e2faff;
  --color-blue-sarong-100: #d1eef7;
  --color-blue-sarong-200: #b6dbe8;
  --color-blue-sarong-300: #92c0cf;
  --color-blue-sarong-400: #71a8b9;
  --color-blue-sarong-500: #4f91a4;
  --color-blue-sarong-600: #447b8a;
  --color-blue-sarong-700: #36626f;
  --color-blue-sarong-800: #264851;
  --color-blue-sarong-900: #193238;
  --color-blue-sarong-950: #091e23;
}

SCSS

$blue-sarong: #9ad6e8;
$blue-sarong-rgb: 154, 214, 232;
$blue-sarong-light: mix(#fff, $blue-sarong, 20%);
$blue-sarong-dark: mix(#000, $blue-sarong, 20%);

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