Post Boy

CSS

:root {
  --post-boy: #7a99ad;
  --post-boy-rgb: 122 153 173;
  --post-boy-oklch: oklch(0.667 0.046 236.7);
}

.element {
  color: var(--post-boy);
  background-color: hsl(204 24% 58%);
  border-color: oklch(0.667 0.046 236.7);
}

Tailwind CSS v4

@theme {
  --color-post-boy: #7a99ad;
  --color-post-boy-50: #eaf7ff;
  --color-post-boy-100: #dbeaf6;
  --color-post-boy-200: #c3d8e6;
  --color-post-boy-300: #a3bbcd;
  --color-post-boy-400: #85a3b6;
  --color-post-boy-500: #698ba1;
  --color-post-boy-600: #5a7688;
  --color-post-boy-700: #475e6d;
  --color-post-boy-800: #334550;
  --color-post-boy-900: #233038;
  --color-post-boy-950: #121c22;
}

SCSS

$post-boy: #7a99ad;
$post-boy-rgb: 122, 153, 173;
$post-boy-light: mix(#fff, $post-boy, 20%);
$post-boy-dark: mix(#000, $post-boy, 20%);

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