--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/kleur-en-branding' title: 'Gebruik je merkkleuren | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:29:58+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Pas je merkkleuren toe op secties, tekst en knoppen zodat elke pagina eruitziet alsof die bij dezelfde site hoort. Elk kleurveld in DXPR Builder toont het palet van je thema als stalen, dus je kiest merkkleuren in plaats van codes te raden. Het voorbeeld geeft een sectie je primaire merkkleur met witte tekst. De video volgt de stappen hieronder: hij kleurt een sectie met je merkstaal en maakt zijn tekst wit. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Gebruik je merkkleuren' description: |- Pas je merkkleuren toe op secties, tekst en knoppen zodat elke pagina eruitziet alsof die bij dezelfde site hoort. Elk kleurveld in DXPR Builder toont het palet van je thema als stalen, dus je kiest merkkleuren in plaats van codes te raden. Het voorbeeld geeft een sectie je primaire merkkleur met witte tekst. De video volgt de stappen hieronder: hij kleurt een sectie met je merkstaal en maakt zijn tekst wit. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:29:58+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/kleur-en-branding' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/kleur-en-branding' description: |- Pas je merkkleuren toe op secties, tekst en knoppen zodat elke pagina eruitziet alsof die bij dezelfde site hoort. Elk kleurveld in DXPR Builder toont het palet van je thema als stalen, dus je kiest merkkleuren in plaats van codes te raden. Het voorbeeld geeft een sectie je primaire merkkleur met witte tekst. De video volgt de stappen hieronder: hij kleurt een sectie met je merkstaal en maakt zijn tekst wit. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/nl/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/nl/hc/documentation/learn-dxpr-builder/design/overview) # Gebruik je merkkleuren. DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen ## In deze gids Gerelateerde gidsen - [Elementen laten reageren bij hover](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/hovereffecten) - [Kies kaartstijlen die op de hele site terugkeren](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/kaartstijlen) - [Geef builderinhoud stijl met de CSS van je thema](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/aangepaste-css) Pas je merkkleuren toe op secties, tekst en knoppen zodat elke pagina eruitziet alsof die bij dezelfde site hoort. Elk kleurveld in DXPR Builder toont het palet van je thema als stalen, dus je kiest merkkleuren in plaats van codes te raden. Het voorbeeld geeft een sectie je primaire merkkleur met witte tekst. De video volgt de stappen hieronder: hij kleurt een sectie met je merkstaal en maakt zijn tekst wit. ## Voordat je begint - Je merkkleuren staan in het thema. Met DXPR Theme stel je ze in onder **Appearance** > **Settings** > **DXPR Theme** (`/admin/appearance/settings/dxpr_theme`), in het paneel **Colors**. - DXPR Builder toont de eerste tien verschillende kleuren van dat palet als stalen. ## Een sectie kleuren 1. Wijs de sectie aan, open **More** en kies **Settings**. 2. Open het paneel **Style**. 3. Klik op de kleurknop van **Background**. De kleurkiezer opent met je stalen. 4. Klik op je primaire merkstaal. 5. Klik op de kleurknop van **Font color** en kies wit. 6. Klik op **Save**. De alineatekst wordt wit; koppen behouden de kopkleur van het thema. 7. Om een kop ook wit te maken, open je de **Settings** van zijn **Text**-element, kies je wit voor **Font color** in zijn **Style**-paneel en klik je op **Save**. ## Wat je ziet De sectie vult zich met je merkkleur en zijn alineatekst en kop worden wit. Dezelfde stalen verschijnen in elk kleurveld. Daaronder vallen de panelen **Style** en **Hover style**, en de **Start color** en **End color** van een **Gradient**-achtergrond van een sectie. Om een kleur buiten het palet te gebruiken, typ je zijn code in het tekstveld van de kiezer, bijvoorbeeld `#2196F3`. Verschuif de opaciteitsregelaar voor een doorschijnende kleur. **Clear** verwijdert de kleur. ## Kleuren gekoppeld houden aan het thema Een staal kopieert de code van de kleur naar het element. Als je het themapalet later wijzigt, behoudt dat element de oude kleur. Om een element het palet te laten volgen, gebruik je in plaats daarvan een kleurklasse. Open de **Settings** van het element en kies een chip onder **HTML classes**: | Chip | Wat het doet | |---|---| | **Primary background**, **Secondary background** and others | Bootstrap-kleuren uit je thema | | **Primary text color**, **Secondary text color** and others | Bootstrap-tekskleuren uit je thema | | **Background color: DXPR Theme primary** | De **Primary**-kleur van DXPR Theme, met zijn bijpassende tekstkleur | | **Text color: DXPR Theme accent1** | De **Secondary**-kleur van DXPR Theme voor tekst | De **DXPR Theme**-chips verschijnen alleen wanneer DXPR Theme is ingeschakeld. ## Kleurvelden per element | Waar | Wat het kleurt | |---|---| | **Style**-paneel: **Font color**, **Border color**, **Background** | Het element zelf | | **Hover style**-paneel: dezelfde velden | Het element terwijl de pointer erop staat | | **Button**: **Type** | Een kant-en-klaar knopkleurenschema | | **Card**: **Type** | De achtergrond en tekst van de hele kaart | | **Alert**: **Type** | **Success**, **Info**, **Warning** of **Danger** | | **Section**: **Background effects** > **Gradient** | Een vermenging van twee kleuren | ## Leesbare kleur - Houd genoeg contrast tussen tekst en achtergrond. WCAG 2.1 Level AA vraagt om minstens 4,5 op 1 voor normale tekst. - Gebruik kleur niet alleen om betekenis te dragen; combineer hem met een label of een pictogram. - Wissel sectieachtergronden af, zoals wit, lichtgrijs en je merkkleur, om lange pagina's ritme te geven. ## Als je je kleuren niet ziet - **De kleurkiezer toont geen stalen.** Het standaardthema van je site heeft geen kleurenpalet. Typ je kleurcodes, of gebruik een thema met een palet, zoals DXPR Theme. - **Een element behoudt zijn oude kleur nadat je het themapalet hebt gewijzigd.** Een staal slaat een vaste kleurcode op. Kies het nieuwe staal, of schakel over op een kleurchip onder **HTML classes**, die het palet volgt. - **Background of Font color heeft geen effect op een kaart.** Een kaart-**Type** anders dan **Default** stelt zijn kleuren in met themaklassen die winnen. Zet **Type** eerst op **Default**. ## Wat nu? - [Elementen laten reageren bij hover](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/hovereffecten): wijzig kleuren wanneer bezoekers op een element wijzen. - [Je kaarten stijlen](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/kaartstijlen): pas je kleuren toe op kaarten. - [Aangepaste CSS](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/aangepaste-css): stel merkregels in die de panelen niet dekken.