Samenvatting
Via het thema beheer je het kleurenpalet van je gehele website. Je kleuren zijn opgedeeld in 7 kleurgroepen. Door kleuren centraal te beheren via het thema, hoef je slechts op één plek een kleur te wijzigen om die overal op je website automatisch bij te werken.
Hoe werkt het
Waar vind je dit
Ga naar een website → klik op het Thema-icoon (verfkwast) → klik in het linkermenu op Kleuren
Of vanuit de editor: linkerzijbalk → Thema-icoon → Kleuren
De 7 kleurgroepen
Elke kleurgroep heeft een eigen rol in je website:
| Kleurgroep | Waarvoor wordt het gebruikt | Standaard |
|---|---|---|
| Wit | Achtergronden in de lichte modus | Wit |
| Zwart | Tekst en donkere elementen | Zwart |
| Primair | Je hoofdkleur — voor knoppen, links en accenten | Blauw |
| Secundair | Subtielere elementen, alternatieve accenten | Grijs |
| Succes | Bevestigingen en succesmeldingen (bijv. "formulier verzonden") | Groen |
| Gevaar | Foutmeldingen en waarschuwingen (bijv. "dit veld is verplicht") | Rood |
| Neutraal | Achtergronden, lijnen, schaduwen en randen | Grijstinten (10 varianten) |
Licht/Donker-weergave van het CMS (niet je website)
Boven in het kleurenpanel staan de knoppen Licht, Donker en Apparaat. Deze bepalen hoe de Mach3Blocks-omgeving er voor jou uitziet terwijl je werkt — de licht- of donkermodus van het CMS zelf. Apparaat volgt daarbij de instelling van je eigen apparaat. Deze voorkeur wordt per gebruiker onthouden.
Belangrijk: deze knoppen veranderen niets aan de kleuren van je website en hebben geen invloed op wat bezoekers zien. Hoe je website er licht of donker uitziet, bepaal je per blok met de kleurmodi (zie hieronder).
Een kleur wijzigen
- Klik op het gekleurde vakje naast de kleurgroepnaam
- Er verschijnt een kleurpicker met de volgende opties:
- Gebruikt — swatches van recent gebruikte kleuren (handig om consistent te blijven)
- Kleurvlak — een gradient-picker voor precisiekeuze
- HEX-veld — typ een hexadecimale kleurcode in (bijv.
#E8B4A0) - RGB-invoer — stel Rood, Groen en Blauw apart in (0–255)
- HSB-invoer — stel Hue, Saturation en Brightness in
- Pas eventueel de opacity (doorzichtigheid) aan via de slider
- Kies een kleur uit de presets voor snelle selectie
- Klik op het vinkje (✓) om de kleur te bevestigen
Kleurmodi per blok
Elk blok op je website kan in één van vier kleurmodi worden weergegeven:
| Kleurmodus | Beschrijving |
|---|---|
| Licht | Lichte achtergrond met donkere tekst — de standaard |
| Licht tint | Iets getinte lichte achtergrond — subtiel verschil met puur wit |
| Donker tint | Iets getinte donkere achtergrond — minder zwaar dan volledig donker |
| Donker | Donkere achtergrond met lichte tekst — voor een donker gedeelte op je pagina |
Door kleurmodi slim te combineren met je kleurvariabelen, creëer je automatisch een consistent kleurschema voor de hele website. Elk blok past zich aan op basis van zijn kleurmodus.
Hoe werken kleuren door?
Er zijn geen voorgedefinieerde kleurpaletten die je in één klik kunt activeren. Je stelt iedere kleurgroep handmatig in. De kleuren die je kiest, worden vervolgens automatisch toegepast op alle blokken en elementen die naar de bijbehorende kleurvariabele verwijzen. Verander je de primaire kleur, dan veranderen alle knoppen en links in één keer mee.
Preview
Het canvas rechts toont een livepreview van je kleurinstellingen. Je ziet direct hoe headings, teksten, knoppen en iconen eruitzien in de huidige kleurmodus — zo kun je het effect van je wijzigingen meteen beoordelen.
Tip: Stel je kleurvariabelen in vóórdat je begint met bouwen. Dan hebben alle elementen direct de juiste kleuren en bespaar je achteraf veel correctiewerk.
Wanneer gebruik je dit
- Je wilt het kleurenpalet van je website instellen of aanpassen
- Je wilt licht- en donkermodus apart configureren
- Je wilt begrijpen hoe kleurvariabelen doorwerken in het thema