Blue Vacation

CSS

:root {
  --blue-vacation: #1e7eae;
  --blue-vacation-rgb: 30 126 174;
  --blue-vacation-oklch: oklch(0.563 0.112 236.5);
}

.element {
  color: var(--blue-vacation);
  background-color: hsl(200 71% 40%);
  border-color: oklch(0.563 0.112 236.5);
}

Tailwind CSS v4

@theme {
  --color-blue-vacation: #1e7eae;
  --color-blue-vacation-50: #d9fbff;
  --color-blue-vacation-100: #c6eeff;
  --color-blue-vacation-200: #a8dcff;
  --color-blue-vacation-300: #80c0ea;
  --color-blue-vacation-400: #56a8d8;
  --color-blue-vacation-500: #2490c6;
  --color-blue-vacation-600: #227aa7;
  --color-blue-vacation-700: #1b6286;
  --color-blue-vacation-800: #0e4863;
  --color-blue-vacation-900: #093246;
  --color-blue-vacation-950: #001e2d;
}

SCSS

$blue-vacation: #1e7eae;
$blue-vacation-rgb: 30, 126, 174;
$blue-vacation-light: mix(#fff, $blue-vacation, 20%);
$blue-vacation-dark: mix(#000, $blue-vacation, 20%);

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