Bliss Blue

CSS

:root {
  --bliss-blue: #7ac7e1;
  --bliss-blue-rgb: 122 199 225;
  --bliss-blue-oklch: oklch(0.789 0.085 221.6);
}

.element {
  color: var(--bliss-blue);
  background-color: hsl(195 63% 68%);
  border-color: oklch(0.789 0.085 221.6);
}

Tailwind CSS v4

@theme {
  --color-bliss-blue: #7ac7e1;
  --color-bliss-blue-50: #dcfbff;
  --color-bliss-blue-100: #cbeffd;
  --color-bliss-blue-200: #aeddef;
  --color-bliss-blue-300: #87c1d7;
  --color-bliss-blue-400: #62aac2;
  --color-bliss-blue-500: #3993ae;
  --color-bliss-blue-600: #327c93;
  --color-bliss-blue-700: #286376;
  --color-bliss-blue-800: #1a4956;
  --color-bliss-blue-900: #11333c;
  --color-bliss-blue-950: #031e26;
}

SCSS

$bliss-blue: #7ac7e1;
$bliss-blue-rgb: 122, 199, 225;
$bliss-blue-light: mix(#fff, $bliss-blue, 20%);
$bliss-blue-dark: mix(#000, $bliss-blue, 20%);

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