Underwater Falling

CSS

:root {
  --underwater-falling: #0022bb;
  --underwater-falling-rgb: 0 34 187;
  --underwater-falling-oklch: oklch(0.383 0.231 264.1);
}

.element {
  color: var(--underwater-falling);
  background-color: hsl(229 100% 37%);
  border-color: oklch(0.383 0.231 264.1);
}

Tailwind CSS v4

@theme {
  --color-underwater-falling: #0022bb;
  --color-underwater-falling-50: #d6f4ff;
  --color-underwater-falling-100: #c4e6ff;
  --color-underwater-falling-200: #a6d1ff;
  --color-underwater-falling-300: #80b0ff;
  --color-underwater-falling-400: #5694ff;
  --color-underwater-falling-500: #3273ff;
  --color-underwater-falling-600: #2c62ef;
  --color-underwater-falling-700: #224fc0;
  --color-underwater-falling-800: #0f3a90;
  --color-underwater-falling-900: #092866;
  --color-underwater-falling-950: #011547;
}

SCSS

$underwater-falling: #0022bb;
$underwater-falling-rgb: 0, 34, 187;
$underwater-falling-light: mix(#fff, $underwater-falling, 20%);
$underwater-falling-dark: mix(#000, $underwater-falling, 20%);

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