Charismatic Sky

CSS

:root {
  --charismatic-sky: #9ac1dc;
  --charismatic-sky-rgb: 154 193 220;
  --charismatic-sky-oklch: oklch(0.792 0.057 238.6);
}

.element {
  color: var(--charismatic-sky);
  background-color: hsl(205 49% 73%);
  border-color: oklch(0.792 0.057 238.6);
}

Tailwind CSS v4

@theme {
  --color-charismatic-sky: #9ac1dc;
  --color-charismatic-sky-50: #e7f8ff;
  --color-charismatic-sky-100: #d8ebf9;
  --color-charismatic-sky-200: #bfd8eb;
  --color-charismatic-sky-300: #9ebcd2;
  --color-charismatic-sky-400: #80a4bd;
  --color-charismatic-sky-500: #628ca8;
  --color-charismatic-sky-600: #54768e;
  --color-charismatic-sky-700: #435f72;
  --color-charismatic-sky-800: #2f4654;
  --color-charismatic-sky-900: #20303a;
  --color-charismatic-sky-950: #0f1c24;
}

SCSS

$charismatic-sky: #9ac1dc;
$charismatic-sky-rgb: 154, 193, 220;
$charismatic-sky-light: mix(#fff, $charismatic-sky, 20%);
$charismatic-sky-dark: mix(#000, $charismatic-sky, 20%);

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