Blue Paisley

CSS

:root {
  --blue-paisley: #2282a8;
  --blue-paisley-rgb: 34 130 168;
  --blue-paisley-oklch: oklch(0.57 0.103 229.9);
}

.element {
  color: var(--blue-paisley);
  background-color: hsl(197 66% 40%);
  border-color: oklch(0.57 0.103 229.9);
}

Tailwind CSS v4

@theme {
  --color-blue-paisley: #2282a8;
  --color-blue-paisley-50: #d9fbff;
  --color-blue-paisley-100: #c7efff;
  --color-blue-paisley-200: #a8ddf9;
  --color-blue-paisley-300: #80c1e3;
  --color-blue-paisley-400: #57aacf;
  --color-blue-paisley-500: #2592bd;
  --color-blue-paisley-600: #237c9f;
  --color-blue-paisley-700: #1c6380;
  --color-blue-paisley-800: #0f495e;
  --color-blue-paisley-900: #0a3342;
  --color-blue-paisley-950: #001e2a;
}

SCSS

$blue-paisley: #2282a8;
$blue-paisley-rgb: 34, 130, 168;
$blue-paisley-light: mix(#fff, $blue-paisley, 20%);
$blue-paisley-dark: mix(#000, $blue-paisley, 20%);

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