Kleurenschema-generator voor websites
Een volledig licht en donker thema uit je merkkleur.
Kies je merkkleur en krijg een kant-en-klaar kleurenschema voor een website of app: getinte achtergronden en vlakken, randen, tekst en gedempte tekst, een hoofdkleur die leesbaar blijft en een passend accent, telkens voor een licht en een donker thema. Een live voorbeeld toont een kaart met tekst en knoppen, en het hele schema kopieer je als CSS-variabelen, waarbij het donkere thema de systeeminstelling volgt.
Zo kun je een kleurenschema voor een website maken
- Stap 1
Kies je merkkleur.
- Stap 2
Bekijk de lichte en donkere voorbeelden.
- Stap 3
Kopieer de CSS-variabelen.
Waarom PhotoTools
Licht en donker
Twee passende thema’s tegelijk.
Leesbaar vanaf het begin
Hoofd- en accentkleur met minstens 3:1 contrast.
Klaar voor code
CSS-variabelen met donkere modus.
Ondersteunde formaten
Uitvoer
- CSS
Veelgestelde vragen
Waarom wijkt de hoofdkleur iets af van de mijne?
Is je kleur te licht of te donker tegenover de achtergrond, dan schuift hij net genoeg op voor een contrast van 3:1, zodat knoppen zichtbaar blijven.
Hoe gebruik ik de CSS?
Plak die in je stylesheet en gebruik de variabelen, bijvoorbeeld background: var(--color-primary). Het donkere thema volgt de systeeminstelling.
Is dit gratis?
Ja. De browsertools van PhotoTools zijn gratis, zonder limieten en zonder account.
Worden mijn afbeeldingen naar een server geüpload?
Nee. Deze tool draait volledig in je browser met WebAssembly. Je afbeeldingen verlaten je apparaat nooit en er wordt niets opgeslagen.