Relative Color 2 (Embed)

<section>
  <article style="--color: oklch(90% 25% 20)">
    ...
  </article>
  <article style="--color: oklch(90% 25% 80)">
    ...
  </article>
  <article style="--color: oklch(90% 25% 140)">
    ...
  </article>
  <article style="--color: oklch(90% 25% 260)">
    ...
  </article>
</section>

Preview

--surface

Brug --color, som er sat inline på hvert card.

--border

Lav en variant af samme farve, men med en lyshed på 80%.

--heading

Lav en mørkere variant af farven ved at bruge 35% af dens oprindelige lyshed.

--text

Tag udgangspunkt i --heading-farven og gør teksten lidt lysere ved at øge lysheden med 10 procentpoint.