Hawaiian Sky

CSS

:root {
  --hawaiian-sky: #83a2bd;
  --hawaiian-sky-rgb: 131 162 189;
  --hawaiian-sky-oklch: oklch(0.698 0.053 244.9);
}

.element {
  color: var(--hawaiian-sky);
  background-color: hsl(208 31% 63%);
  border-color: oklch(0.698 0.053 244.9);
}

Tailwind CSS v4

@theme {
  --color-hawaiian-sky: #83a2bd;
  --color-hawaiian-sky-50: #eaf7ff;
  --color-hawaiian-sky-100: #daeaf9;
  --color-hawaiian-sky-200: #c3d7ea;
  --color-hawaiian-sky-300: #a2bbd1;
  --color-hawaiian-sky-400: #85a2bc;
  --color-hawaiian-sky-500: #698aa7;
  --color-hawaiian-sky-600: #59758d;
  --color-hawaiian-sky-700: #475e71;
  --color-hawaiian-sky-800: #324553;
  --color-hawaiian-sky-900: #22303a;
  --color-hawaiian-sky-950: #111c24;
}

SCSS

$hawaiian-sky: #83a2bd;
$hawaiian-sky-rgb: 131, 162, 189;
$hawaiian-sky-light: mix(#fff, $hawaiian-sky, 20%);
$hawaiian-sky-dark: mix(#000, $hawaiian-sky, 20%);

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