Blue Square

CSS

:root {
  --blue-square: #508a9a;
  --blue-square-rgb: 80 138 154;
  --blue-square-oklch: oklch(0.6 0.065 217.5);
}

.element {
  color: var(--blue-square);
  background-color: hsl(193 32% 46%);
  border-color: oklch(0.6 0.065 217.5);
}

Tailwind CSS v4

@theme {
  --color-blue-square: #508a9a;
  --color-blue-square-50: #e2faff;
  --color-blue-square-100: #d1eef7;
  --color-blue-square-200: #b6dbe8;
  --color-blue-square-300: #92c0ce;
  --color-blue-square-400: #71a8b8;
  --color-blue-square-500: #5091a3;
  --color-blue-square-600: #447b8a;
  --color-blue-square-700: #36626e;
  --color-blue-square-800: #264851;
  --color-blue-square-900: #193238;
  --color-blue-square-950: #091e23;
}

SCSS

$blue-square: #508a9a;
$blue-square-rgb: 80, 138, 154;
$blue-square-light: mix(#fff, $blue-square, 20%);
$blue-square-dark: mix(#000, $blue-square, 20%);

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