Half Baked

CSS

:root {
  --half-baked: #558f93;
  --half-baked-rgb: 85 143 147;
  --half-baked-oklch: oklch(0.612 0.061 201.4);
}

.element {
  color: var(--half-baked);
  background-color: hsl(184 27% 45%);
  border-color: oklch(0.612 0.061 201.4);
}

Tailwind CSS v4

@theme {
  --color-half-baked: #558f93;
  --color-half-baked-50: #e2fbfd;
  --color-half-baked-100: #d1eef1;
  --color-half-baked-200: #b7dce0;
  --color-half-baked-300: #93c1c5;
  --color-half-baked-400: #73aaad;
  --color-half-baked-500: #519297;
  --color-half-baked-600: #467c80;
  --color-half-baked-700: #376366;
  --color-half-baked-800: #27494a;
  --color-half-baked-900: #1a3334;
  --color-half-baked-950: #0a1e1f;
}

SCSS

$half-baked: #558f93;
$half-baked-rgb: 85, 143, 147;
$half-baked-light: mix(#fff, $half-baked, 20%);
$half-baked-dark: mix(#000, $half-baked, 20%);

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