Rain Boots

CSS

:root {
  --rain-boots: #354d65;
  --rain-boots-rgb: 53 77 101;
  --rain-boots-oklch: oklch(0.411 0.05 249.1);
}

.element {
  color: var(--rain-boots);
  background-color: hsl(210 31% 30%);
  border-color: oklch(0.411 0.05 249.1);
}

Tailwind CSS v4

@theme {
  --color-rain-boots: #354d65;
  --color-rain-boots-50: #ebf7ff;
  --color-rain-boots-100: #dceaf9;
  --color-rain-boots-200: #c5d6ea;
  --color-rain-boots-300: #a5bad1;
  --color-rain-boots-400: #88a1bb;
  --color-rain-boots-500: #6d89a7;
  --color-rain-boots-600: #5c748d;
  --color-rain-boots-700: #4a5d71;
  --color-rain-boots-800: #344453;
  --color-rain-boots-900: #242f3a;
  --color-rain-boots-950: #131c24;
}

SCSS

$rain-boots: #354d65;
$rain-boots-rgb: 53, 77, 101;
$rain-boots-light: mix(#fff, $rain-boots, 20%);
$rain-boots-dark: mix(#000, $rain-boots, 20%);

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