Longitude

CSS

:root {
  --longitude: #add5e4;
  --longitude-rgb: 173 213 228;
  --longitude-oklch: oklch(0.849 0.047 222.7);
}

.element {
  color: var(--longitude);
  background-color: hsl(196 50% 79%);
  border-color: oklch(0.849 0.047 222.7);
}

Tailwind CSS v4

@theme {
  --color-longitude: #add5e4;
  --color-longitude-50: #e8f8ff;
  --color-longitude-100: #d8ecf4;
  --color-longitude-200: #c0d9e3;
  --color-longitude-300: #9fbdca;
  --color-longitude-400: #81a5b3;
  --color-longitude-500: #638e9d;
  --color-longitude-600: #557885;
  --color-longitude-700: #43606a;
  --color-longitude-800: #30464e;
  --color-longitude-900: #213136;
  --color-longitude-950: #101d21;
}

SCSS

$longitude: #add5e4;
$longitude-rgb: 173, 213, 228;
$longitude-light: mix(#fff, $longitude, 20%);
$longitude-dark: mix(#000, $longitude, 20%);

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