First of July

CSS

:root {
  --first-of-july: #bce6ef;
  --first-of-july-rgb: 188 230 239;
  --first-of-july-oklch: oklch(0.898 0.045 212.1);
}

.element {
  color: var(--first-of-july);
  background-color: hsl(191 61% 84%);
  border-color: oklch(0.898 0.045 212.1);
}

Tailwind CSS v4

@theme {
  --color-first-of-july: #bce6ef;
  --color-first-of-july-50: #e7f9fd;
  --color-first-of-july-100: #d8ecf1;
  --color-first-of-july-200: #bfdae0;
  --color-first-of-july-300: #9ebec6;
  --color-first-of-july-400: #80a6ae;
  --color-first-of-july-500: #638f98;
  --color-first-of-july-600: #547980;
  --color-first-of-july-700: #436067;
  --color-first-of-july-800: #30474b;
  --color-first-of-july-900: #203134;
  --color-first-of-july-950: #101d20;
}

SCSS

$first-of-july: #bce6ef;
$first-of-july-rgb: 188, 230, 239;
$first-of-july-light: mix(#fff, $first-of-july, 20%);
$first-of-july-dark: mix(#000, $first-of-july, 20%);

.element {
  color: $first-of-july;
  box-shadow: 0 0 0 2px rgba($first-of-july, 0.35);
}