Ebb Tide

CSS

:root {
  --ebb-tide: #7893a0;
  --ebb-tide-rgb: 120 147 160;
  --ebb-tide-oklch: oklch(0.647 0.036 228.7);
}

.element {
  color: var(--ebb-tide);
  background-color: hsl(200 17% 55%);
  border-color: oklch(0.647 0.036 228.7);
}

Tailwind CSS v4

@theme {
  --color-ebb-tide: #7893a0;
  --color-ebb-tide-50: #ebf7fe;
  --color-ebb-tide-100: #dceaf2;
  --color-ebb-tide-200: #c5d7e1;
  --color-ebb-tide-300: #a6bbc7;
  --color-ebb-tide-400: #89a3b0;
  --color-ebb-tide-500: #6e8b99;
  --color-ebb-tide-600: #5d7682;
  --color-ebb-tide-700: #4a5e68;
  --color-ebb-tide-800: #35454c;
  --color-ebb-tide-900: #243035;
  --color-ebb-tide-950: #131c20;
}

SCSS

$ebb-tide: #7893a0;
$ebb-tide-rgb: 120, 147, 160;
$ebb-tide-light: mix(#fff, $ebb-tide, 20%);
$ebb-tide-dark: mix(#000, $ebb-tide, 20%);

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