Blue Persia

CSS

:root {
  --blue-persia: #5b92ac;
  --blue-persia-rgb: 91 146 172;
  --blue-persia-oklch: oklch(0.632 0.07 229.7);
}

.element {
  color: var(--blue-persia);
  background-color: hsl(199 33% 52%);
  border-color: oklch(0.632 0.07 229.7);
}

Tailwind CSS v4

@theme {
  --color-blue-persia: #5b92ac;
  --color-blue-persia-50: #e2f9ff;
  --color-blue-persia-100: #d2edfc;
  --color-blue-persia-200: #b7daed;
  --color-blue-persia-300: #94bed5;
  --color-blue-persia-400: #72a7c0;
  --color-blue-persia-500: #518fac;
  --color-blue-persia-600: #467991;
  --color-blue-persia-700: #376174;
  --color-blue-persia-800: #264755;
  --color-blue-persia-900: #1a313c;
  --color-blue-persia-950: #0a1d25;
}

SCSS

$blue-persia: #5b92ac;
$blue-persia-rgb: 91, 146, 172;
$blue-persia-light: mix(#fff, $blue-persia, 20%);
$blue-persia-dark: mix(#000, $blue-persia, 20%);

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