Dark Royalty

CSS

:root {
  --dark-royalty: #02066f;
  --dark-royalty-rgb: 2 6 111;
  --dark-royalty-oklch: oklch(0.252 0.165 265);
}

.element {
  color: var(--dark-royalty);
  background-color: hsl(238 96% 22%);
  border-color: oklch(0.252 0.165 265);
}

Tailwind CSS v4

@theme {
  --color-dark-royalty: #02066f;
  --color-dark-royalty-50: #e0f5ff;
  --color-dark-royalty-100: #cfe7ff;
  --color-dark-royalty-200: #b5d3ff;
  --color-dark-royalty-300: #91b4ff;
  --color-dark-royalty-400: #6e9aff;
  --color-dark-royalty-500: #4f7ef2;
  --color-dark-royalty-600: #436bcc;
  --color-dark-royalty-700: #3656a4;
  --color-dark-royalty-800: #223f7b;
  --color-dark-royalty-900: #172c57;
  --color-dark-royalty-950: #08183a;
}

SCSS

$dark-royalty: #02066f;
$dark-royalty-rgb: 2, 6, 111;
$dark-royalty-light: mix(#fff, $dark-royalty, 20%);
$dark-royalty-dark: mix(#000, $dark-royalty, 20%);

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