Adventure of the Seas

CSS

:root {
  --adventure-of-the-seas: #3063af;
  --adventure-of-the-seas-rgb: 48 99 175;
  --adventure-of-the-seas-oklch: oklch(0.505 0.133 258.4);
}

.element {
  color: var(--adventure-of-the-seas);
  background-color: hsl(216 57% 44%);
  border-color: oklch(0.505 0.133 258.4);
}

Tailwind CSS v4

@theme {
  --color-adventure-of-the-seas: #3063af;
  --color-adventure-of-the-seas-50: #e0f7ff;
  --color-adventure-of-the-seas-100: #cfe9ff;
  --color-adventure-of-the-seas-200: #b4d6ff;
  --color-adventure-of-the-seas-300: #90b8fc;
  --color-adventure-of-the-seas-400: #6c9fec;
  --color-adventure-of-the-seas-500: #4b85dd;
  --color-adventure-of-the-seas-600: #4071ba;
  --color-adventure-of-the-seas-700: #335a96;
  --color-adventure-of-the-seas-800: #21436f;
  --color-adventure-of-the-seas-900: #162e4e;
  --color-adventure-of-the-seas-950: #071a34;
}

SCSS

$adventure-of-the-seas: #3063af;
$adventure-of-the-seas-rgb: 48, 99, 175;
$adventure-of-the-seas-light: mix(#fff, $adventure-of-the-seas, 20%);
$adventure-of-the-seas-dark: mix(#000, $adventure-of-the-seas, 20%);

.element {
  color: $adventure-of-the-seas;
  box-shadow: 0 0 0 2px rgba($adventure-of-the-seas, 0.35);
}