Blue Paradise

CSS

:root {
  --blue-paradise: #5095c3;
  --blue-paradise-rgb: 80 149 195;
  --blue-paradise-oklch: oklch(0.644 0.098 239.9);
}

.element {
  color: var(--blue-paradise);
  background-color: hsl(204 49% 54%);
  border-color: oklch(0.644 0.098 239.9);
}

Tailwind CSS v4

@theme {
  --color-blue-paradise: #5095c3;
  --color-blue-paradise-50: #ddf9ff;
  --color-blue-paradise-100: #ccedff;
  --color-blue-paradise-200: #b0dafb;
  --color-blue-paradise-300: #8abee6;
  --color-blue-paradise-400: #65a6d3;
  --color-blue-paradise-500: #3f8ec0;
  --color-blue-paradise-600: #3778a2;
  --color-blue-paradise-700: #2c6082;
  --color-blue-paradise-800: #1c4760;
  --color-blue-paradise-900: #133144;
  --color-blue-paradise-950: #041d2c;
}

SCSS

$blue-paradise: #5095c3;
$blue-paradise-rgb: 80, 149, 195;
$blue-paradise-light: mix(#fff, $blue-paradise, 20%);
$blue-paradise-dark: mix(#000, $blue-paradise, 20%);

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