# daisyUI Kleurnamen & Class Cheatsheet: Essentiële Tabel voor Themawisselingen

Het grootste voordeel van het gebruik van daisyUI is het **gemak van themawisselingen**. Deze kracht verdwijnt echter zodra een ontwikkelaar of ontwerper een vaste kleur zoals `bg-blue-500` rechtstreeks in de HTML plaatst. In plaats daarvan kun je de betekenis‑gebaseerde kleurnamen van daisyUI gebruiken, zoals `primary`, `base-100` of `error`, en componenten schrijven als `btn-primary`, `bg-base-200` of `text-error`. Wanneer je later het thema wijzigt, volgt de hele UI automatisch de nieuwe tinten.

Daarom draait alles om **kleurnamen en class‑patronen kennen en combineren**. Voor ervaren ontwerpers is dit intuïtief, maar voor beginners of backend/full‑stack ontwikkelaars die af en toe UI maken, is het veel sneller om deze cheatsheet naast je te hebben in plaats van telkens de documentatie te raadplegen. In dit artikel vind je een overzicht van *wanneer* welke kleurnaam te gebruiken en *hoe* je deze combineert met de juiste classes.

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

---

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

| Kleurnaam          | Wanneer gebruiken? (kort)           | Voorbeeldgebruik          |
| ------------------- | ----------------------------------- | ------------------------- |
| `primary`           | Hoofdtint van het merk              | Belangrijkste knoppen, CTA |
| `primary-content`   | Tekst/icoon boven `primary`         | Tekstkleur op een primary knop |
| `secondary`         | Bijzondere actie / submerk          | Subknoppen, extra nadruk |
| `secondary-content` | Tekst/icoon boven `secondary`       | Tekstkleur in een secondary gebied |
| `accent`            | Accent / highlight                  | Badge, linkaccent, opvallend element |
| `accent-content`    | Tekst/icoon boven `accent`          | Tekstkleur op een accent achtergrond |
| `neutral`           | Neutrale UI (donker)                | Navigatie, footer, diepe panelen |
| `neutral-content`   | Tekst/icoon boven `neutral`         | Tekstkleur in een neutral gebied |
| `base-100`          | Basis pagina achtergrond            | Pagina/ canvas achtergrond |
| `base-200`          | Een niveau hoger                   | Kaarten, sectie achtergrond |
| `base-300`          | Sterkere scheiding / laag          | Scheidingslijn, diepe panelen |
| `base-content`      | Tekst/icoon boven `base`            | Standaard tekst |
| `info`              | Informatie / gids                  | Informatie banner, hint |
| `info-content`      | Tekst/icoon boven `info`            | Tekstkleur op een info achtergrond |
| `success`           | Succes / goed                     | Voltooiing / succes melding |
| `success-content`   | Tekst/icoon boven `success`         | Tekstkleur op een success achtergrond |
| `warning`           | Waarschuwing / alert               | Waarschuwing bericht, bevestiging nodig |
| `warning-content`   | Tekst/icoon boven `warning`         | Tekstkleur op een warning achtergrond |
| `error`             | Fout / gevaar                     | Foutmelding, destructieve actie |
| `error-content`     | Tekst/icoon boven `error`           | Tekstkleur op een error achtergrond |

---

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

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

---

## Opaciteit voor intensiteit {#sec-c72e6700b4d3}

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

> Wil je de intensiteit van een kleur aanpassen, gebruik dan `class + kleur` met een `/getal(%)`. Het overschrijven van kleurnamen is toegestaan, maar het toevoegen van extra kleuren buiten de daisyUI‑set kan de uniformiteit schaden en onverwachte tinten opleveren bij thema‑wisselingen.

---

**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/)