Sudden Sapphire

CSS

:root {
  --sudden-sapphire: #6376a9;
  --sudden-sapphire-rgb: 99 118 169;
  --sudden-sapphire-oklch: oklch(0.572 0.082 268.1);
}

.element {
  color: var(--sudden-sapphire);
  background-color: hsl(224 29% 53%);
  border-color: oklch(0.572 0.082 268.1);
}

Tailwind CSS v4

@theme {
  --color-sudden-sapphire: #6376a9;
  --color-sudden-sapphire-50: #ecf5ff;
  --color-sudden-sapphire-100: #dde7ff;
  --color-sudden-sapphire-200: #c6d3f8;
  --color-sudden-sapphire-300: #a7b6e2;
  --color-sudden-sapphire-400: #8a9dd0;
  --color-sudden-sapphire-500: #6f84bd;
  --color-sudden-sapphire-600: #5e70a0;
  --color-sudden-sapphire-700: #4b5980;
  --color-sudden-sapphire-800: #35425f;
  --color-sudden-sapphire-900: #242d43;
  --color-sudden-sapphire-950: #131a2b;
}

SCSS

$sudden-sapphire: #6376a9;
$sudden-sapphire-rgb: 99, 118, 169;
$sudden-sapphire-light: mix(#fff, $sudden-sapphire, 20%);
$sudden-sapphire-dark: mix(#000, $sudden-sapphire, 20%);

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