Waar leg je je kleuren vast op je website?

Je kleuren vastleggen doe je op één plek, als variabelen. Daarna verwijs je overal naar die variabelen in plaats van naar losse codes.

Verander je dan een kleur, dan verandert je hele site mee.

Waar die ene plek is, hangt af van je opzet.

Met een paginabouwer

Daar zit een scherm met globale kleuren. Stel ze daar in en kies bij elk element die globale kleur in plaats van een losse code.

Dat laatste wordt vaak vergeten, en dan werkt het systeem niet. Meer daarover lees je bij figma.

Bij een blokkenthema

Daar staan je kleuren in de instellingen van je thema en zijn ze als palet beschikbaar in de editor.

Dat is de netste opzet die WordPress kent.

Met eigen opmaak

Definieer je kleuren als variabelen bovenaan je opmaakbestand en gebruik daarna alleen die.

Dat is ook wat een donkere weergave mogelijk maakt met tien regels. Meer daarover lees je bij css.

Mijn vuistregels

1. Eén plek, en verwijs daar overal naar.
2. Kies nooit een losse kleurcode per element.
3. Geef je kleuren namen naar hun functie, niet naar hun kleur.
4. Leg vast waarvoor elke kleur bedoeld is.

Die derde is een detail dat later veel oplevert: noem hem accent en niet oranje, want oranje kan volgend jaar blauw zijn.

Wat je ermee wint

Een huisstijlwijziging is dan een kwestie van vijf regels aanpassen in plaats van driehonderd pagina’s nalopen.

Meer daarover lees je bij design system.

Wat er misgaat zonder

Zeven tinten van dezelfde kleur, verspreid over je pagina’s, die niemand meer terug kan vinden.

Meer daarover lees je bij wat een hexcode is.

Veelgestelde vragen hierover