Gunjō Blue

CSS

:root {
  --gunjo-blue: #5d8cae;
  --gunjo-blue-rgb: 93 140 174;
  --gunjo-blue-oklch: oklch(0.62 0.073 240.8);
}

.element {
  color: var(--gunjo-blue);
  background-color: hsl(205 33% 52%);
  border-color: oklch(0.62 0.073 240.8);
}

Tailwind CSS v4

@theme {
  --color-gunjo-blue: #5d8cae;
  --color-gunjo-blue-50: #e4f8ff;
  --color-gunjo-blue-100: #d4ebff;
  --color-gunjo-blue-200: #bad9f1;
  --color-gunjo-blue-300: #98bcda;
  --color-gunjo-blue-400: #77a4c6;
  --color-gunjo-blue-500: #588cb2;
  --color-gunjo-blue-600: #4b7796;
  --color-gunjo-blue-700: #3c5f79;
  --color-gunjo-blue-800: #2a4659;
  --color-gunjo-blue-900: #1c303e;
  --color-gunjo-blue-950: #0c1d27;
}

SCSS

$gunjo-blue: #5d8cae;
$gunjo-blue-rgb: 93, 140, 174;
$gunjo-blue-light: mix(#fff, $gunjo-blue, 20%);
$gunjo-blue-dark: mix(#000, $gunjo-blue, 20%);

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