Ocean City

CSS

:root {
  --ocean-city: #7896ba;
  --ocean-city-rgb: 120 150 186;
  --ocean-city-oklch: oklch(0.664 0.064 253.3);
}

.element {
  color: var(--ocean-city);
  background-color: hsl(213 32% 60%);
  border-color: oklch(0.664 0.064 253.3);
}

Tailwind CSS v4

@theme {
  --color-ocean-city: #7896ba;
  --color-ocean-city-50: #e9f6ff;
  --color-ocean-city-100: #dae9fd;
  --color-ocean-city-200: #c3d6f0;
  --color-ocean-city-300: #a2bad8;
  --color-ocean-city-400: #84a1c4;
  --color-ocean-city-500: #6889b0;
  --color-ocean-city-600: #597494;
  --color-ocean-city-700: #475d77;
  --color-ocean-city-800: #324458;
  --color-ocean-city-900: #222f3d;
  --color-ocean-city-950: #111b27;
}

SCSS

$ocean-city: #7896ba;
$ocean-city-rgb: 120, 150, 186;
$ocean-city-light: mix(#fff, $ocean-city, 20%);
$ocean-city-dark: mix(#000, $ocean-city, 20%);

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