Beste kleurentools en webdesign gereedschap voor ontwerpers

Hieronder vind je een aantal kleurentools die ik zelf heel handig vind bij het ontwerpen met en bepalen van kleuren en het maken van een kleurenpalet, bijvoorbeeld voor een huisstijl.

RGB Kleurencirkel

Ik vind zelf deze kleurencirkel heel waardevol voor het bepalen van kleuren voor je website:

rgb kleurencirkel hex kleur website webdesign kleurverloop

Primaire kleuren

Op een kleurenbeeldscherm zijn slechts lichtbronnen in drie kleuren aanwezig:
rood, groen en blauw.

Secundaire kleuren

Door menging van licht in deze drie kleuren ontstaan de secundaire kleuren magenta, cyaan en geel, en ook alle andere kleuren.

Complementaire kleuren

De complementaire kleuren staan in de kleurencirkel tegenover elkaar, bijvoorbeeld blauw en geel.

In dit schema wordt ervan uitgegaan dat de HEX-kleur #888 de grijskleur is die precies tussen zwart (#000) en wit (#FFF) in zit. De verlopen naar de primaire, secundaire en complemetaire kleuren kun je zelf vinden met bijvoorbeeld de ColorPick Eyedropper voor Chrome browser (zie verder in deze handleiding).
Lees meer over hex-kleuren en webdesign


Kleurentools en gereedschap voor designers (Mac/Windows)

Skala | Gratis

Skala Color herkent kleuren die naar het klembord zijn gekopieerd, en laat ze zien als een staal dat met een enkele klik kan worden toegepast. Skala Color is een compacte macOS-kleurkiezer die werkt met een enorme diversiteit aan formaten, die alles omvat wat je waarschijnlijk nodig zult hebben voor het ontwikkelen van web, iOS, Android en macOS – Hex, CSS RGBA, CSS HSLA, UIColor, NSColor en meer.
Skala | Gratis

Colorsnapper

De macOS-kleurkiezer-app voor ontwerpers en ontwikkelaars waarmee u eenvoudig kleuren van elke pixel op het scherm kunt verzamelen, aanpassen, ordenen en exporteren.
colorsnapper

Chroma

Chroma

Kelir

Heel handig is Kelir. Bekijk hieronder de instructievideo.
Kelir


Online out-of-te-box kleurenmixers (Chrome firefox safari)

Paletton | Gratis en online kleurencirkel

Vaste kost bij het maken van iedere website. Fantastisch.
paletton.com

Adobe color | Gratis en online kleurencirkel

De kleurenmixer van adobe.com is onlangs volledig verniewd. Heel handig.
Chroma

Swisscolors | random kleuren

Willekeurige kleurencombinaties, telkens als je je Swisscolors laadt.
Swisscolors

Coolors | kleurenschema’s

Veel inspiratie en het vastleggen van een kleurenschema met 5 hex-kleuren.
Coolors


Smart Web | kleuren in stappen mixen

Een fantastische tool om kleurverlopen te maken tussen 2 RGB/Hex-kleuren. Je kan zelf het aantal stappen invoeren (maximaal 10). Bekijk hieronder enkele voorbeelden die ik gemaakt heb.
Smart Web


Kleurenverloop voorbeeld 1

In het onderstaande voorbeeld heb ik een verloop gemaakt met behulp van de bovenstaande tool van geel naar blauw in 3 tussenstappen:


geel
#FFFF00


tint
#BFD940


tint
#80B380


tint
#408CBF


blauw
#0066FF


Kleurenverloop voorbeeld 2

In het onderstaande voorbeeld heb ik een verloop gemaakt van rood naar blauw in 4 stappen:


rood
#FF0000


tint
#CC1433


tint
#992966


tint
#663D99


tint
#3352CC


blauw
#0066FF


Hieronder zie je hoe je een voorbeeld hoe je dit kan maken met Smart Web:
Beste kleurentools webdesign gereedschap kleur ontwerpers


Gratis browser kleurentools (Chrome extensie)

Kleurentools die je kunt toevoegen aan je Chrome browser:
Installeer ColorPick Eyedropper voor Chrome browser

Een andere heel handige tool voor Chrome die ik je niet wil onthouden, maar dan voor typografie is WhatFont. Met WhatFont kun je heel makkelijk lettertypes analyseren en achterhalen.
Installeer WhatFont voor Chrome browser


Kleurvoorbeelden van kleurpaletten

Bekijk wat je kunt maken met kleurpaletten:
Bekijk 50 kleurenvoorbeelden en kleurcodes webdesign

Alles over Kleur en webdesign

Handleidingen over kleur, RGB, Hex en webdesign
Great UX Portfolio Tools and Resources


Meer webdesign gereedschap voor ontwerpers en designers