Twin Cities

CSS

:root {
  --twin-cities: #a4c7c8;
  --twin-cities-rgb: 164 199 200;
  --twin-cities-oklch: oklch(0.804 0.037 198.6);
}

.element {
  color: var(--twin-cities);
  background-color: hsl(182 25% 71%);
  border-color: oklch(0.804 0.037 198.6);
}

Tailwind CSS v4

@theme {
  --color-twin-cities: #a4c7c8;
  --color-twin-cities-50: #eaf9f9;
  --color-twin-cities-100: #daeced;
  --color-twin-cities-200: #c3d9db;
  --color-twin-cities-300: #a2bebf;
  --color-twin-cities-400: #85a6a7;
  --color-twin-cities-500: #698e8f;
  --color-twin-cities-600: #597879;
  --color-twin-cities-700: #476061;
  --color-twin-cities-800: #334747;
  --color-twin-cities-900: #233131;
  --color-twin-cities-950: #121d1d;
}

SCSS

$twin-cities: #a4c7c8;
$twin-cities-rgb: 164, 199, 200;
$twin-cities-light: mix(#fff, $twin-cities, 20%);
$twin-cities-dark: mix(#000, $twin-cities, 20%);

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