Relative Color Syntax

Brand Primitive

:root {
  --spanish-sky-blue: #009ce1;
}

Tints

:root {
  /* blue */
  --color-blue: var(--spanish-sky-blue);
  --color-blue-dark-1: oklch(from var(--color-blue) calc(l - 0.1) c h);
  --color-blue-dark-2: oklch(from var(--color-blue) calc(l - 0.2) c h);
  --color-blue-light-1: oklch(from var(--color-blue) calc(l + 0.1) c h);
  --color-blue-light-2: oklch(from var(--color-blue) calc(l + 0.2) c h);
}