# daisyUI kleurnamen & class-cheatsheet: essentiële tabel voor themawisselingen

Het grootste voordeel van daisyUI is dat je **thema’s moeiteloos kunt wisselen**. Die kracht gaat verloren zodra een ontwikkelaar of ontwerper vaste Tailwind-kleuren zoals `bg-blue-500` rechtstreeks in de HTML zet. Gebruik in plaats daarvan de semantische kleurnamen van daisyUI, zoals `primary`, `base-100` en `error`, en pas ze toe met classes als `btn-primary`, `bg-base-200` en `text-error`. Dan volgt bij een themawissel automatisch de volledige UI en blijven alle kleuren in balans.

De kern is dus: **ken de kleurnamen en class-patronen en combineer ze in je markup**. Ervaren designers hebben dit vaak paraat, maar voor beginners of backend-/full-stack-ontwikkelaars die af en toe UI bouwen, is het sneller om dit cheat sheet bij de hand te hebben dan telkens de documentatie door te spitten. In dit artikel staat daarom een overzichtelijke tabel met **wanneer** je welke kleurnaam gebruikt en **hoe** je die koppelt aan de juiste class.

![Robotontwikkelaar en kleurpaletkaart](/media/editor_temp/6/726cb8ce-603f-45b6-becf-365e5d4f8b12.png)

---

## Kleurnamen (wanneer gebruiken) {#sec-4d3fa8b26445}

| Kleurnaam           | Wanneer gebruiken? (kort)     | Voorbeeldgebruik                  |
| ------------------- | ----------------------------- | --------------------------------- |
| `primary`           | Hoofdkleur van het merk       | Belangrijkste knoppen, CTA’s      |
| `primary-content`   | Tekst/iconen op `primary`     | Tekst op `primary`-knoppen        |
| `secondary`         | Secundaire actie / submerk    | Secundaire knoppen, extra nadruk  |
| `secondary-content` | Tekst/iconen op `secondary`   | Tekst in `secondary`-gebieden     |
| `accent`            | Accent / highlight            | Badges, link-highlights, accenten |
| `accent-content`    | Tekst/iconen op `accent`      | Tekst op `accent`-achtergrond     |
| `neutral`           | Neutrale UI (donkere toon)    | Navigatie, footer, donkere panels |
| `neutral-content`   | Tekst/iconen op `neutral`     | Tekst in `neutral`-gebieden       |
| `base-100`          | Standaard paginabackground    | Pagina-/canvas-achtergrond        |
| `base-200`          | Licht verhoogd oppervlak      | Cards, sectie-achtergronden       |
| `base-300`          | Sterkere scheiding / laag     | Dividers, diepere panels          |
| `base-content`      | Tekst/iconen op de base-reeks | Standaard bodytekst               |
| `info`              | Informatie / begeleiding      | Info-banners, hints               |
| `info-content`      | Tekst/iconen op `info`        | Tekst op `info`-achtergrond       |
| `success`           | Succes / positief             | Succesmeldingen                   |
| `success-content`   | Tekst/iconen op `success`     | Tekst op `success`-achtergrond    |
| `warning`           | Waarschuwing / aandachtspunt  | Waarschuwingen, bevestiging nodig |
| `warning-content`   | Tekst/iconen op `warning`     | Tekst op `warning`-achtergrond    |
| `error`             | Fout / gevaar                 | Fouten, destructieve acties       |
| `error-content`     | Tekst/iconen op `error`       | Tekst op `error`-achtergrond      |

---

## Class-patronen (kleurnamen combineren) {#sec-5007f90f39f0}

| Doel                       | Patroon                     | Voorbeeld                              |
| -------------------------- | --------------------------- | -------------------------------------- |
| Achtergrondkleur           | `bg-{COLOR}`                | `bg-primary`, `bg-base-200`            |
| Tekstkleur                 | `text-{COLOR}`              | `text-base-content`, `text-error`      |
| Rand                       | `border-{COLOR}`            | `border-neutral`, `border-base-300`    |
| Gradient start/midden/eind | `from- / via- / to-{COLOR}` | `from-primary via-accent to-secondary` |
| Ring (focus)               | `ring-{COLOR}`              | `ring-primary`                         |
| Ring-offset                | `ring-offset-{COLOR}`       | `ring-offset-base-100`                 |
| SVG-vulling                | `fill-{COLOR}`              | `fill-accent`                          |
| SVG-lijn                   | `stroke-{COLOR}`            | `stroke-neutral-content`               |
| Schaduw                    | `shadow-{COLOR}`            | `shadow-primary`                       |
| Omtrek                     | `outline-{COLOR}`           | `outline-info`                         |
| Scheiding (divide)         | `divide-{COLOR}`            | `divide-base-300`                      |
| Form-accent                | `accent-{COLOR}`            | `accent-primary`                       |
| Caret                      | `caret-{COLOR}`             | `caret-primary`                        |
| Onderstreping/decoratie    | `decoration-{COLOR}`        | `decoration-accent`                    |
| Placeholder                | `placeholder-{COLOR}`       | `placeholder-base-content`             |

---

## Opaciteit aanpassen {#sec-c72e6700b4d3}

| Doel                    | Patroon               | Voorbeeld                        |
| ----------------------- | --------------------- | -------------------------------- |
| Lichte achtergrond      | `bg-{COLOR}/10`       | `bg-primary/10`, `bg-success/15` |
| Subtiele rand           | `border-{COLOR}/30`   | `border-error/30`                |
| Minder opvallende tekst | `text-{COLOR}/70`     | `text-base-content/70`           |
| Hover-intensiteit       | `hover:bg-{COLOR}/80` | `hover:bg-primary/80`            |

> Wil je de intensiteit van een kleur aanpassen, voeg dan `/{getal}` (percentage) toe aan de class. Kleurnamen overschrijven kan, maar extra (niet-semantische) kleuren rechtstreeks in HTML ondermijnen de consistentie en kunnen bij themawisselingen onverwacht opvallen.

---

**Gerelateerde artikelen**:

* [daisyUI Thema: 35 kleurenpaletten voor een probleemloze kleurkeuze](/ko/whitedec/2026/1/25/daisyui-theme-35-colors/)
* [Introductie van de Tailwind CSS plugin daisyUI: snel UI bouwen met alleen classes](/ko/whitedec/2026/1/25/tailwind-css-plugin-daisyui-intro-quick-ui-creation/)