Arabian Nights

CSS

:root {
  --arabian-nights: #016c84;
  --arabian-nights-rgb: 1 108 132;
  --arabian-nights-oklch: oklch(0.492 0.089 220.3);
}

.element {
  color: var(--arabian-nights);
  background-color: hsl(191 98% 26%);
  border-color: oklch(0.492 0.089 220.3);
}

Tailwind CSS v4

@theme {
  --color-arabian-nights: #016c84;
  --color-arabian-nights-50: #dbfcff;
  --color-arabian-nights-100: #c8effe;
  --color-arabian-nights-200: #abdef0;
  --color-arabian-nights-300: #83c2d9;
  --color-arabian-nights-400: #5cabc3;
  --color-arabian-nights-500: #2f94af;
  --color-arabian-nights-600: #2a7d94;
  --color-arabian-nights-700: #226477;
  --color-arabian-nights-800: #154a57;
  --color-arabian-nights-900: #0e333d;
  --color-arabian-nights-950: #011f26;
}

SCSS

$arabian-nights: #016c84;
$arabian-nights-rgb: 1, 108, 132;
$arabian-nights-light: mix(#fff, $arabian-nights, 20%);
$arabian-nights-dark: mix(#000, $arabian-nights, 20%);

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