Data og farver: Fra værdi til visuelt udtryk

Data før grafik

Datavisualisering gør værdier lettere at sammenligne og mønstre lettere at få øje på. Vælg formen efter det spørgsmål, læseren skal kunne besvare:

Tre procent-ringe kan godt være tre uafhængige statistikker; deres værdier skal ikke nødvendigvis lægges sammen. Søjler er typisk lettere at sammenligne præcist. Lad søjlernes skala starte ved nul, så længderne ikke overdriver forskelle.

Grafikken er et ekstra lag. Labels, værdier og enhed skal stadig kunne forstås, hvis CSS eller grafikken forsvinder:

<figure>
  <figcaption>Erfaring pr. år</figcaption>
  <ul>
    <li>2023: 14 %</li>
    <li>2024: 26 %</li>
    <li>2025: 69 %</li>
  </ul>
</figure>

Demoerne isolerer teknikker og er ikke alle færdige, tilgængelige diagrammer. Når du bruger mønstrene i en opgave, skal data også findes som almindelig tekst eller i en tabel. Farve må ikke være den eneste måde at aflæse forskelle på.

Bland farver med color-mix

color-mix() blander to farver. Farverummet bestemmer, hvordan overgangen beregnes; oklab er et godt udgangspunkt til en jævn ændring i oplevet farve.

.bar {
  --percent: 70%;
  background: color-mix(in oklab, #3980dd var(--percent), #dae9fc);
}

Her giver 70% af den første farve automatisk 30% af den anden. Uden andele bliver blandingen 50/50. Summer over 100% normaliseres; summer under 100% giver også transparens. Det er blandingsvægte, ikke positioner som i en gradient.

Prøv: Skift blandingens farverum fra oklab til oklch. I et cirkulært farverum kan fx longer hue vælge den lange vej rundt i farvecirklen; det er et visuelt valg, ikke automatisk en bedre eller mere præcis skala.

Afled farver med Relative Color Syntax

Relative Color Syntax tager udgangspunkt i én farve og ændrer udvalgte kanaler. I oklch() er l lyshed, c chroma og h farvetone:

button {
  --color: #3980dd;
  background: var(--color);
}
button:hover {
  background: oklch(from var(--color) calc(l - 0.1) c h);
}

from omregner udgangsfarven til det valgte farverum, så kanalerne kan genbruges. Her reduceres lysheden med 0.1, mens chroma og hue bevares. Alpha kan ændres separat med fx oklch(from var(--color) l c h / 0.5).

Brug color-mix(), når du vil blande to farver, og relative farver, når du vil styre bestemte kanaler i én farve. Afledning garanterer ikke kontrast: kontrollér tekst, fokus og states med de faktiske baggrunde.

Læs mere: MDN: color-mix() og Relative colors.