My Skiff

CSS

:root {
  --my-skiff: #6597ab;
  --my-skiff-rgb: 101 151 171;
  --my-skiff-oklch: oklch(0.648 0.061 225.1);
}

.element {
  color: var(--my-skiff);
  background-color: hsl(197 29% 53%);
  border-color: oklch(0.648 0.061 225.1);
}

Tailwind CSS v4

@theme {
  --color-my-skiff: #6597ab;
  --color-my-skiff-50: #e4f9ff;
  --color-my-skiff-100: #d4edf8;
  --color-my-skiff-200: #badae9;
  --color-my-skiff-300: #97bed0;
  --color-my-skiff-400: #77a7ba;
  --color-my-skiff-500: #578fa5;
  --color-my-skiff-600: #4b798b;
  --color-my-skiff-700: #3b6170;
  --color-my-skiff-800: #2a4752;
  --color-my-skiff-900: #1c3139;
  --color-my-skiff-950: #0c1d23;
}

SCSS

$my-skiff: #6597ab;
$my-skiff-rgb: 101, 151, 171;
$my-skiff-light: mix(#fff, $my-skiff, 20%);
$my-skiff-dark: mix(#000, $my-skiff, 20%);

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