Rusty Tap

CSS

:root {
  --rusty-tap: #719da8;
  --rusty-tap-rgb: 113 157 168;
  --rusty-tap-oklch: oklch(0.668 0.05 214.9);
}

.element {
  color: var(--rusty-tap);
  background-color: hsl(192 24% 55%);
  border-color: oklch(0.668 0.05 214.9);
}

Tailwind CSS v4

@theme {
  --color-rusty-tap: #719da8;
  --color-rusty-tap-50: #e6f9ff;
  --color-rusty-tap-100: #d6ecf3;
  --color-rusty-tap-200: #bddae2;
  --color-rusty-tap-300: #9bbec8;
  --color-rusty-tap-400: #7da6b1;
  --color-rusty-tap-500: #5e8f9b;
  --color-rusty-tap-600: #507983;
  --color-rusty-tap-700: #406169;
  --color-rusty-tap-800: #2e474d;
  --color-rusty-tap-900: #1f3135;
  --color-rusty-tap-950: #0e1d20;
}

SCSS

$rusty-tap: #719da8;
$rusty-tap-rgb: 113, 157, 168;
$rusty-tap-light: mix(#fff, $rusty-tap, 20%);
$rusty-tap-dark: mix(#000, $rusty-tap, 20%);

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