Malibu Blue

CSS

:root {
  --malibu-blue: #00a9da;
  --malibu-blue-rgb: 0 169 218;
  --malibu-blue-oklch: oklch(0.686 0.133 227.6);
}

.element {
  color: var(--malibu-blue);
  background-color: hsl(193 100% 43%);
  border-color: oklch(0.686 0.133 227.6);
}

Tailwind CSS v4

@theme {
  --color-malibu-blue: #00a9da;
  --color-malibu-blue-50: #cffdff;
  --color-malibu-blue-100: #baf1ff;
  --color-malibu-blue-200: #97e0ff;
  --color-malibu-blue-300: #67c4ee;
  --color-malibu-blue-400: #28addc;
  --color-malibu-blue-500: #0095ca;
  --color-malibu-blue-600: #007eab;
  --color-malibu-blue-700: #006589;
  --color-malibu-blue-800: #004b65;
  --color-malibu-blue-900: #003447;
  --color-malibu-blue-950: #001f2e;
}

SCSS

$malibu-blue: #00a9da;
$malibu-blue-rgb: 0, 169, 218;
$malibu-blue-light: mix(#fff, $malibu-blue, 20%);
$malibu-blue-dark: mix(#000, $malibu-blue, 20%);

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