Into the Stratosphere

CSS

:root {
  --into-the-stratosphere: #425267;
  --into-the-stratosphere-rgb: 66 82 103;
  --into-the-stratosphere-oklch: oklch(0.434 0.04 255.4);
}

.element {
  color: var(--into-the-stratosphere);
  background-color: hsl(214 22% 33%);
  border-color: oklch(0.434 0.04 255.4);
}

Tailwind CSS v4

@theme {
  --color-into-the-stratosphere: #425267;
  --color-into-the-stratosphere-50: #eef6ff;
  --color-into-the-stratosphere-100: #e0e9f6;
  --color-into-the-stratosphere-200: #cad5e6;
  --color-into-the-stratosphere-300: #abb9cc;
  --color-into-the-stratosphere-400: #8fa0b7;
  --color-into-the-stratosphere-500: #7588a1;
  --color-into-the-stratosphere-600: #637388;
  --color-into-the-stratosphere-700: #4f5c6d;
  --color-into-the-stratosphere-800: #394350;
  --color-into-the-stratosphere-900: #272f38;
  --color-into-the-stratosphere-950: #151b23;
}

SCSS

$into-the-stratosphere: #425267;
$into-the-stratosphere-rgb: 66, 82, 103;
$into-the-stratosphere-light: mix(#fff, $into-the-stratosphere, 20%);
$into-the-stratosphere-dark: mix(#000, $into-the-stratosphere, 20%);

.element {
  color: $into-the-stratosphere;
  box-shadow: 0 0 0 2px rgba($into-the-stratosphere, 0.35);
}