Sailing on the Bay

CSS

:root {
  --sailing-on-the-bay: #aecbd9;
  --sailing-on-the-bay-rgb: 174 203 217;
  --sailing-on-the-bay-oklch: oklch(0.825 0.037 228.5);
}

.element {
  color: var(--sailing-on-the-bay);
  background-color: hsl(200 36% 77%);
  border-color: oklch(0.825 0.037 228.5);
}

Tailwind CSS v4

@theme {
  --color-sailing-on-the-bay: #aecbd9;
  --color-sailing-on-the-bay-50: #ebf7fe;
  --color-sailing-on-the-bay-100: #dceaf2;
  --color-sailing-on-the-bay-200: #c5d8e1;
  --color-sailing-on-the-bay-300: #a5bbc7;
  --color-sailing-on-the-bay-400: #89a3b0;
  --color-sailing-on-the-bay-500: #6d8b9a;
  --color-sailing-on-the-bay-600: #5d7682;
  --color-sailing-on-the-bay-700: #4a5e68;
  --color-sailing-on-the-bay-800: #35454c;
  --color-sailing-on-the-bay-900: #243035;
  --color-sailing-on-the-bay-950: #131c20;
}

SCSS

$sailing-on-the-bay: #aecbd9;
$sailing-on-the-bay-rgb: 174, 203, 217;
$sailing-on-the-bay-light: mix(#fff, $sailing-on-the-bay, 20%);
$sailing-on-the-bay-dark: mix(#000, $sailing-on-the-bay, 20%);

.element {
  color: $sailing-on-the-bay;
  box-shadow: 0 0 0 2px rgba($sailing-on-the-bay, 0.35);
}