Celestial Canvas

CSS

:root {
  --celestial-canvas: #0a2538;
  --celestial-canvas-rgb: 10 37 56;
  --celestial-canvas-oklch: oklch(0.254 0.048 242.8);
}

.element {
  color: var(--celestial-canvas);
  background-color: hsl(205 70% 13%);
  border-color: oklch(0.254 0.048 242.8);
}

Tailwind CSS v4

@theme {
  --color-celestial-canvas: #0a2538;
  --color-celestial-canvas-50: #eaf7ff;
  --color-celestial-canvas-100: #dbeaf7;
  --color-celestial-canvas-200: #c4d7e8;
  --color-celestial-canvas-300: #a3bbcf;
  --color-celestial-canvas-400: #86a2b9;
  --color-celestial-canvas-500: #6a8aa4;
  --color-celestial-canvas-600: #5a758b;
  --color-celestial-canvas-700: #485e6f;
  --color-celestial-canvas-800: #334552;
  --color-celestial-canvas-900: #233039;
  --color-celestial-canvas-950: #121c23;
}

SCSS

$celestial-canvas: #0a2538;
$celestial-canvas-rgb: 10, 37, 56;
$celestial-canvas-light: mix(#fff, $celestial-canvas, 20%);
$celestial-canvas-dark: mix(#000, $celestial-canvas, 20%);

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