Pale Cerulean

CSS

:root {
  --pale-cerulean: #9bc4e2;
  --pale-cerulean-rgb: 155 196 226;
  --pale-cerulean-oklch: oklch(0.801 0.061 240.2);
}

.element {
  color: var(--pale-cerulean);
  background-color: hsl(205 55% 75%);
  border-color: oklch(0.801 0.061 240.2);
}

Tailwind CSS v4

@theme {
  --color-pale-cerulean: #9bc4e2;
  --color-pale-cerulean-50: #e7f8ff;
  --color-pale-cerulean-100: #d7ebfb;
  --color-pale-cerulean-200: #bed8ed;
  --color-pale-cerulean-300: #9dbcd5;
  --color-pale-cerulean-400: #7ea4bf;
  --color-pale-cerulean-500: #608cab;
  --color-pale-cerulean-600: #527690;
  --color-pale-cerulean-700: #415f74;
  --color-pale-cerulean-800: #2e4655;
  --color-pale-cerulean-900: #1f303b;
  --color-pale-cerulean-950: #0f1c25;
}

SCSS

$pale-cerulean: #9bc4e2;
$pale-cerulean-rgb: 155, 196, 226;
$pale-cerulean-light: mix(#fff, $pale-cerulean, 20%);
$pale-cerulean-dark: mix(#000, $pale-cerulean, 20%);

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