Alpine Lake

CSS

:root {
  --alpine-lake: #4598ab;
  --alpine-lake-rgb: 69 152 171;
  --alpine-lake-oklch: oklch(0.636 0.085 215);
}

.element {
  color: var(--alpine-lake);
  background-color: hsl(191 43% 47%);
  border-color: oklch(0.636 0.085 215);
}

Tailwind CSS v4

@theme {
  --color-alpine-lake: #4598ab;
  --color-alpine-lake-50: #dbfcff;
  --color-alpine-lake-100: #c9f0fb;
  --color-alpine-lake-200: #acdeec;
  --color-alpine-lake-300: #85c3d4;
  --color-alpine-lake-400: #5fabbe;
  --color-alpine-lake-500: #3394a9;
  --color-alpine-lake-600: #2d7d8f;
  --color-alpine-lake-700: #246473;
  --color-alpine-lake-800: #184a54;
  --color-alpine-lake-900: #0f333a;
  --color-alpine-lake-950: #021f24;
}

SCSS

$alpine-lake: #4598ab;
$alpine-lake-rgb: 69, 152, 171;
$alpine-lake-light: mix(#fff, $alpine-lake, 20%);
$alpine-lake-dark: mix(#000, $alpine-lake, 20%);

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