Midnight in Tokyo

CSS

:root {
  --midnight-in-tokyo: #000088;
  --midnight-in-tokyo-rgb: 0 0 136;
  --midnight-in-tokyo-oklch: oklch(0.283 0.196 264.1);
}

.element {
  color: var(--midnight-in-tokyo);
  background-color: hsl(240 100% 27%);
  border-color: oklch(0.283 0.196 264.1);
}

Tailwind CSS v4

@theme {
  --color-midnight-in-tokyo: #000088;
  --color-midnight-in-tokyo-50: #dbf5ff;
  --color-midnight-in-tokyo-100: #c9e7ff;
  --color-midnight-in-tokyo-200: #add2ff;
  --color-midnight-in-tokyo-300: #88b3ff;
  --color-midnight-in-tokyo-400: #6198ff;
  --color-midnight-in-tokyo-500: #407aff;
  --color-midnight-in-tokyo-600: #3768dd;
  --color-midnight-in-tokyo-700: #2b53b1;
  --color-midnight-in-tokyo-800: #193d85;
  --color-midnight-in-tokyo-900: #102a5e;
  --color-midnight-in-tokyo-950: #041740;
}

SCSS

$midnight-in-tokyo: #000088;
$midnight-in-tokyo-rgb: 0, 0, 136;
$midnight-in-tokyo-light: mix(#fff, $midnight-in-tokyo, 20%);
$midnight-in-tokyo-dark: mix(#000, $midnight-in-tokyo, 20%);

.element {
  color: $midnight-in-tokyo;
  box-shadow: 0 0 0 2px rgba($midnight-in-tokyo, 0.35);
}