Cool Jazz

CSS

:root {
  --cool-jazz: #bee7e0;
  --cool-jazz-rgb: 190 231 224;
  --cool-jazz-oklch: oklch(0.897 0.044 183.8);
}

.element {
  color: var(--cool-jazz);
  background-color: hsl(170 46% 83%);
  border-color: oklch(0.897 0.044 183.8);
}

Tailwind CSS v4

@theme {
  --color-cool-jazz: #bee7e0;
  --color-cool-jazz-50: #e8f9f7;
  --color-cool-jazz-100: #d9edea;
  --color-cool-jazz-200: #c0dbd7;
  --color-cool-jazz-300: #9fbfba;
  --color-cool-jazz-400: #82a7a1;
  --color-cool-jazz-500: #659089;
  --color-cool-jazz-600: #567a74;
  --color-cool-jazz-700: #45615d;
  --color-cool-jazz-800: #314743;
  --color-cool-jazz-900: #22322f;
  --color-cool-jazz-950: #111d1b;
}

SCSS

$cool-jazz: #bee7e0;
$cool-jazz-rgb: 190, 231, 224;
$cool-jazz-light: mix(#fff, $cool-jazz, 20%);
$cool-jazz-dark: mix(#000, $cool-jazz, 20%);

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