IN DEZE HANDLEIDING:
- 1 Beste kleurentools voor webdesign en designers
- 2 Kleurentools en gereedschap voor designers (Mac/Windows)
- 3 Online out-of-te-box kleurenmixers (Chrome Firefox Webbrowsers)
- 4 Gratis browser kleurentools (Chrome extensie)
- 5 Kleurvoorbeelden van kleurpaletten in 2024
- 6 Beste kleurentools webdesign gereedschap voor ontwerpers
- 7 WhatFont Google extentie font typografie checken
- 8 Colorhex kleurenmixer kleurtinten voor ontwerp webdesign
Beste kleurentools voor webdesign en designers
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.
Meer over kleuren en kleurenschema’s
Ik ben eigenlijk al vanaf mijn kunstacademie-opleiding gefascineerd door kleuren en kleurgebruik. Ik heb een eigen kleurensysteem opgezet. Al met al heb ik hier honderden uren inzitten.
Veel cursisten maken hier gebruik van voor hun WordPress sites. Wil je meer informatie over deze kleuren? Kijk dan op:
GoldenRatioColors.com
RGB Kleurencirkel
Ik vind zelf deze kleurencirkel heel waardevol voor het bepalen van kleuren voor je website:
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
Kelir
Heel handig is Kelir. Bekijk hieronder de instructievideo.
Kelir
https://www.youtube.com/bHoc7ez3Pbc
Online out-of-te-box kleurenmixers (Chrome Firefox Webbrowsers)
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
Toptal
Mooi voor monochromatische kleurenpaletten
www.toptal.com
Coolors | kleurenschema’s
Veel inspiratie en het vastleggen van een kleurenschema met 5 hex-kleuren.
Coolors
colordesigner.io
Zelf handig RGB en Hex kleurenpaletten aanmaken. Bijvoorbeeld voor opdrachtgevers.
https://colordesigner.io
Schemecolor
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
Deze is ook handig. Perfect voor monochromatische kleuren.:
https://learnui.design/tools/data-color-picker.html
Components.ai
Components.ai is mijn favoriet in in 2024
Colordrop
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:
#FFFF00
#BFD940
#80B380
#408CBF
#0066FF
Kleurenverloop voorbeeld 2
In het onderstaande voorbeeld heb ik een verloop gemaakt van rood naar blauw in 4 stappen:
#FF0000
#CC1433
#992966
#663D99
#3352CC
#0066FF
Hieronder zie je hoe je een voorbeeld hoe je dit kan maken met Smart Web:
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 in 2024
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
Beste kleurentools webdesign gereedschap voor ontwerpers
De beste kleurentools die handig zijn bij het ontwerpen met en bepalen van kleuren en het maken van een kleurenpalet voor je huisstijl, ontwerp en webdesign.
WhatFont Google extentie font typografie checken
Vind de fonts en lettertypes van iedere website op een eenvoudige manier met deze handige extentie voor Google Chrome. WhatFont | font typografie selecteren Perfect gereedschap voor het vinden en selecteren van fonts en lettertypes voor je design, webdesign en typografiesch ontwerp en het maken CSS-stijlen maken. Let op: werkt […]
Colorhex kleurenmixer kleurtinten voor ontwerp webdesign
De perfecte kleuren met de kleurselector en ontwerp prachtige kleurharmonieën, kleurschakeringen, tinten en schakeringen, kleurtinten en mooie kleurcombinaties.