Poetry Reading

CSS

:root {
  --poetry-reading: #9faec9;
  --poetry-reading-rgb: 159 174 201;
  --poetry-reading-oklch: oklch(0.748 0.042 262.2);
}

.element {
  color: var(--poetry-reading);
  background-color: hsl(219 28% 71%);
  border-color: oklch(0.748 0.042 262.2);
}

Tailwind CSS v4

@theme {
  --color-poetry-reading: #9faec9;
  --color-poetry-reading-50: #eff5ff;
  --color-poetry-reading-100: #e1e8f7;
  --color-poetry-reading-200: #cbd5e7;
  --color-poetry-reading-300: #adb8ce;
  --color-poetry-reading-400: #919fb8;
  --color-poetry-reading-500: #7787a3;
  --color-poetry-reading-600: #65728a;
  --color-poetry-reading-700: #515b6e;
  --color-poetry-reading-800: #3a4351;
  --color-poetry-reading-900: #282e39;
  --color-poetry-reading-950: #161b23;
}

SCSS

$poetry-reading: #9faec9;
$poetry-reading-rgb: 159, 174, 201;
$poetry-reading-light: mix(#fff, $poetry-reading, 20%);
$poetry-reading-dark: mix(#000, $poetry-reading, 20%);

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