Deluxe Days

CSS

:root {
  --deluxe-days: #8bc7e6;
  --deluxe-days-rgb: 139 199 230;
  --deluxe-days-oklch: oklch(0.8 0.076 231.4);
}

.element {
  color: var(--deluxe-days);
  background-color: hsl(200 65% 72%);
  border-color: oklch(0.8 0.076 231.4);
}

Tailwind CSS v4

@theme {
  --color-deluxe-days: #8bc7e6;
  --color-deluxe-days-50: #e1f9ff;
  --color-deluxe-days-100: #d0edfe;
  --color-deluxe-days-200: #b5daf0;
  --color-deluxe-days-300: #91bfd8;
  --color-deluxe-days-400: #6fa7c3;
  --color-deluxe-days-500: #4d8faf;
  --color-deluxe-days-600: #427994;
  --color-deluxe-days-700: #356177;
  --color-deluxe-days-800: #244757;
  --color-deluxe-days-900: #18313d;
  --color-deluxe-days-950: #081d27;
}

SCSS

$deluxe-days: #8bc7e6;
$deluxe-days-rgb: 139, 199, 230;
$deluxe-days-light: mix(#fff, $deluxe-days, 20%);
$deluxe-days-dark: mix(#000, $deluxe-days, 20%);

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