In the Mood

CSS

:root {
  --in-the-mood: #2178a4;
  --in-the-mood-rgb: 33 120 164;
  --in-the-mood-oklch: oklch(0.543 0.104 236.1);
}

.element {
  color: var(--in-the-mood);
  background-color: hsl(200 66% 39%);
  border-color: oklch(0.543 0.104 236.1);
}

Tailwind CSS v4

@theme {
  --color-in-the-mood: #2178a4;
  --color-in-the-mood-50: #dafaff;
  --color-in-the-mood-100: #c8eeff;
  --color-in-the-mood-200: #abdbfc;
  --color-in-the-mood-300: #84c0e7;
  --color-in-the-mood-400: #5ca8d4;
  --color-in-the-mood-500: #3090c2;
  --color-in-the-mood-600: #2b7aa4;
  --color-in-the-mood-700: #226183;
  --color-in-the-mood-800: #144861;
  --color-in-the-mood-900: #0d3244;
  --color-in-the-mood-950: #011e2c;
}

SCSS

$in-the-mood: #2178a4;
$in-the-mood-rgb: 33, 120, 164;
$in-the-mood-light: mix(#fff, $in-the-mood, 20%);
$in-the-mood-dark: mix(#000, $in-the-mood, 20%);

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