Pat-A-Pep

CSS

:root {
  --pat-a-pep: #3887bd;
  --pat-a-pep-rgb: 56 135 189;
  --pat-a-pep-oklch: oklch(0.599 0.113 242);
}

.element {
  color: var(--pat-a-pep);
  background-color: hsl(204 54% 48%);
  border-color: oklch(0.599 0.113 242);
}

Tailwind CSS v4

@theme {
  --color-pat-a-pep: #3887bd;
  --color-pat-a-pep-50: #dbfaff;
  --color-pat-a-pep-100: #c9edff;
  --color-pat-a-pep-200: #acdaff;
  --color-pat-a-pep-300: #85beed;
  --color-pat-a-pep-400: #5da6db;
  --color-pat-a-pep-500: #338eca;
  --color-pat-a-pep-600: #2d78aa;
  --color-pat-a-pep-700: #246089;
  --color-pat-a-pep-800: #154765;
  --color-pat-a-pep-900: #0e3147;
  --color-pat-a-pep-950: #021d2e;
}

SCSS

$pat-a-pep: #3887bd;
$pat-a-pep-rgb: 56, 135, 189;
$pat-a-pep-light: mix(#fff, $pat-a-pep, 20%);
$pat-a-pep-dark: mix(#000, $pat-a-pep, 20%);

.element {
  color: $pat-a-pep;
  box-shadow: 0 0 0 2px rgba($pat-a-pep, 0.35);
}