Blue Stream

CSS

:root {
  --blue-stream: #95cdd8;
  --blue-stream-rgb: 149 205 216;
  --blue-stream-oklch: oklch(0.813 0.06 211.1);
}

.element {
  color: var(--blue-stream);
  background-color: hsl(190 46% 72%);
  border-color: oklch(0.813 0.06 211.1);
}

Tailwind CSS v4

@theme {
  --color-blue-stream: #95cdd8;
  --color-blue-stream-50: #e3faff;
  --color-blue-stream-100: #d2eef4;
  --color-blue-stream-200: #b8dbe4;
  --color-blue-stream-300: #95c0ca;
  --color-blue-stream-400: #75a8b3;
  --color-blue-stream-500: #54919d;
  --color-blue-stream-600: #487b84;
  --color-blue-stream-700: #39626a;
  --color-blue-stream-800: #28484d;
  --color-blue-stream-900: #1b3236;
  --color-blue-stream-950: #0b1e21;
}

SCSS

$blue-stream: #95cdd8;
$blue-stream-rgb: 149, 205, 216;
$blue-stream-light: mix(#fff, $blue-stream, 20%);
$blue-stream-dark: mix(#000, $blue-stream, 20%);

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