For the Love of Hue

CSS

:root {
  --for-the-love-of-hue: #457e87;
  --for-the-love-of-hue-rgb: 69 126 135;
  --for-the-love-of-hue-oklch: oklch(0.558 0.061 208.7);
}

.element {
  color: var(--for-the-love-of-hue);
  background-color: hsl(188 32% 40%);
  border-color: oklch(0.558 0.061 208.7);
}

Tailwind CSS v4

@theme {
  --color-for-the-love-of-hue: #457e87;
  --color-for-the-love-of-hue-50: #e2faff;
  --color-for-the-love-of-hue-100: #d2eef3;
  --color-for-the-love-of-hue-200: #b7dce3;
  --color-for-the-love-of-hue-300: #93c0c9;
  --color-for-the-love-of-hue-400: #73a9b2;
  --color-for-the-love-of-hue-500: #51929c;
  --color-for-the-love-of-hue-600: #467b84;
  --color-for-the-love-of-hue-700: #38636a;
  --color-for-the-love-of-hue-800: #27494d;
  --color-for-the-love-of-hue-900: #1a3236;
  --color-for-the-love-of-hue-950: #0a1e21;
}

SCSS

$for-the-love-of-hue: #457e87;
$for-the-love-of-hue-rgb: 69, 126, 135;
$for-the-love-of-hue-light: mix(#fff, $for-the-love-of-hue, 20%);
$for-the-love-of-hue-dark: mix(#000, $for-the-love-of-hue, 20%);

.element {
  color: $for-the-love-of-hue;
  box-shadow: 0 0 0 2px rgba($for-the-love-of-hue, 0.35);
}