Blue Bayberry

CSS

:root {
  --blue-bayberry: #2d5360;
  --blue-bayberry-rgb: 45 83 96;
  --blue-bayberry-oklch: oklch(0.42 0.048 222.2);
}

.element {
  color: var(--blue-bayberry);
  background-color: hsl(195 36% 28%);
  border-color: oklch(0.42 0.048 222.2);
}

Tailwind CSS v4

@theme {
  --color-blue-bayberry: #2d5360;
  --color-blue-bayberry-50: #e7f9ff;
  --color-blue-bayberry-100: #d8ecf4;
  --color-blue-bayberry-200: #bfd9e4;
  --color-blue-bayberry-300: #9ebdca;
  --color-blue-bayberry-400: #7fa5b3;
  --color-blue-bayberry-500: #628e9d;
  --color-blue-bayberry-600: #537885;
  --color-blue-bayberry-700: #42606b;
  --color-blue-bayberry-800: #2f464e;
  --color-blue-bayberry-900: #203136;
  --color-blue-bayberry-950: #0f1d21;
}

SCSS

$blue-bayberry: #2d5360;
$blue-bayberry-rgb: 45, 83, 96;
$blue-bayberry-light: mix(#fff, $blue-bayberry, 20%);
$blue-bayberry-dark: mix(#000, $blue-bayberry, 20%);

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