Professioneel webdesign is niet compleet zonder een kleurenschema te maken. Dit artikel gaat over 20 fantastische hulpmiddelen om u te helpen de perfecte kleurovereenkomst te krijgen.

Er zijn veel hulpmiddelen op het World Wide Web om kleurennirvana te bereiken. Ze lijken compleet anders te zijn, maar veel ervan zijn slechts aangepaste versies van meer populaire en nuttige tools.

Dus om het kleurselectieproces gemakkelijker te maken, hebben we de top 20 beschikbare tools afgerond. Ze zullen je helpen om niet in de war te raken op zoek naar een geschikte optie en de "kleurgelukzaligheid" te voelen

01. Kuler

Kuler is misschien wel de meest bekende kleurtool.

Adobe Kuler is misschien wel de meest populaire online tool voor kleurenthema's die van een eenvoudige online kleurentool is veranderd in een complete bron voor het maken van thema's en delen met anderen. Plug-ins zijn beschikbaar voor alle belangrijke Adobe-applicaties, waaronder Photoshop, Illustrator en InDesign, waardoor Kuler een geweldige tool boordevol functies is voor gewone Creative Suite-gebruikers.

02. ColorExplorer

ColorExplorer kan veel verschillende functies uitvoeren.

We kunnen zeggen dat dit een van de meest doordachte tools is die op internet te vinden zijn. Het biedt een groot aantal hulpmiddelen om uw kleurenpaletten te ontwerpen, aan te passen en te analyseren. Bijvoorbeeld tools die helpen bij het bepalen van toegankelijkheid WCAG kleurenkiezer, conversietools waarmee u tussen verschillende systemen kunt schakelen en alles wat u nodig hebt om een ​​kleur te selecteren en paletten te maken.

03. Kleuren op het web

Kleuren op het web wordt mogelijk gemaakt door Flash.

Colors on the Web laadt effen HEX- of RGB-kleuren en produceert een reeks schema's op basis van verschillende wiskundige verhoudingen. Deze tool werkt niet op iPad of iPhone omdat het Flash gebruikt om het programma uit te voeren.

04. KLEURliefhebbers

COLOURlovers lijkt een beetje op Pinterest voor kleur

05. Pictaculeus

Met Pictaculous kunt u een afbeelding uploaden en op basis daarvan een kleurenschema genereren.

Met deze tool van de makers van MailChimp kun je een afbeelding uploaden en een kleurenschema maken op basis van zijn eigen kleuren. Het is compatibel met een aantal andere instrumenten zoals Kuler en Colourlovers. Pictaculous heeft een handige Adobe Swatch om met thema's te laden, waardoor het snel en gemakkelijk is om "de kleuren vast te leggen" die je nodig hebt om je foto compleet te maken.

06. Contrast-A

Contrast-A creëert een imitatie van verschillende visuele defecten.

Dit is geen typische tool voor kleurenschema's. Het is ontworpen om ervoor te zorgen dat u een WCAG-compatibel kleurenschema hebt gemaakt, dit wordt gedaan door een voorbeeld van contrastniveaus te bekijken en de techniek te gebruiken om gebrek aan kleurwaarneming en lage zichtbaarheid te simuleren. Contrast-A heeft veel links naar handleidingen die alles gebruiksvriendelijker uitleggen dan het specificatiedocument zelf.

07. Kleur Draaien

ColoRotate heeft een prachtige visualisatie van het "kleurenwiel"

ColoRotate heeft vergelijkbare functies als Kuler, maar verschilt door het palet weer te geven op een prachtige 3D-kegel en de mogelijkheid om meer dan 5 kleuren in één schema te genereren. De tool kan worden geïntegreerd met sommige Creative Suite-toepassingen. Het is ook beschikbaar als iPad-app en kan werken met Photoshop in de kleurenconsole-modus.

08. Hex-kleurenschema-generator

HEX creëert kleuren die goed passen bij het bestaande kleurenschema.

HEX is een handig klein hulpmiddel voor het genereren van kleuren. Voer gewoon een kleurcode in en er wordt een reeks mooie kleuren weergegeven die perfect passen bij uw basiskleuren.

09. Ontwerper kleurenschema

De Color Scheme Designer heeft een aantal interessante manieren om kleurthema's te maken.

Deze online tool heeft vergelijkbare functies als Adobe Kuler. Maar dankzij interessante trucs voor het maken van kleurthema's, kunt u parameters voor helderheid / verzadiging en contrast selecteren uit de eigenschappen van het schema, in plaats van te "sleutelen" aan de individuele kleuren waaruit het thema bestaat. Color Scheme Designer biedt toegang tot een reeks wiskundige standaardmethoden, waaronder de mogelijkheid om het kleurenschema van een ontwerp voor één (mono), twee (aanvulling), drie (triade) of vier (viertallige) kleuren met tinten en halve tonen.

10. COPASO

COPASO is een uitstekend hulpmiddel om meerdere problemen tegelijk op te lossen.

Een van de websitetools KLEURliefhebbers, verdient COPASO speciale aandacht, omdat je hiermee veel problemen bij het maken van paletten tegelijk kunt oplossen. Het biedt een complete set kleurselectietools in een eenvoudige interface. Hiermee kunt u paletten markeren, afbeeldingen uploaden, rechtstreeks naar CMYK-links springen en kiezen hoe u uw kleurenschema wilt maken.

11. Kleurmod

Met de Colourmod-desktopwidget kunt u eenvoudig kleuren selecteren en definiëren.

Colourmod is een desktoptool waarmee je eenvoudig een van de kleuren kunt selecteren in de zone waar de widgets zich bevinden, zelfs als je met Dashboard voor MacBook of Konfabulator voor Windows werkt. Colourmod zelf is geen hulpmiddel voor het selecteren van een palet, maar het kan nog steeds worden gebruikt om een ​​kleur te selecteren en te definiëren. In dit geval hoeft u geen andere zwaardere programma's te draaien.

12. ColorZilla

ColorZilla werkt in Chrome en Firefox.

Deze applicatie is oorspronkelijk ontwikkeld als plug-in voor Firefox, maar kan ook in de Google Chrome-browser worden gebruikt. ColorZilla is een extensie die tal van verschillende hulpmiddelen heeft om met kleur te werken, waaronder: kleurenkiezer, pipet, css-verloop maken en paletviewer.

13. Colormunki

Met Colormunki kunt u een kleurenschema maken op basis van Pantone-stalen.

Een handige online tool geïntroduceerd door de makers van Colormunki voor kleurkalibratie. U kunt online paletten maken op basis van Pantone-kleurstalen en verschillende trucs gebruiken om aangename combinaties te vinden.

14.colr.org

Met Colr.org kunt u het kleurbereik van uw afbeeldingen zien.

Deze eenvoudige tool biedt een unieke mogelijkheid om het kleurenschema van een afbeelding te analyseren (in andere programma's wordt deze functie automatisch uitgevoerd). Op deze manier kun je zien uit welke kleuren je foto bestaat en de kleuren kiezen die je leuk vindt om ze in te stellen als de hoofdkleuren van het thema.

15. Kleur grijpen

ColourGrab is een geweldige compacte generator voor kleurenschema's voor afbeeldingen.

Deze handige tool maakt een kleurenpalet op basis van elke afbeelding op internet. Voer gewoon het adres in van de afbeelding die u wilt analyseren, de site zal deze "grijpen", het kleurenschema bepalen en een eenvoudig 3D-diagram maken dat het gebruik van verschillende kleuren voor deze afbeelding laat zien. Het is misschien niet de beste optie voor standaardthema's, maar ColourGrab is geweldig voor het analyseren van kleurverdeling in afbeeldingen.

16 kleurenmenger

ColorBlender creëert een set van vijf kleuren die goed bij elkaar passen.

Deze site is een eenvoudig hulpmiddel waarmee u een voorbeeldafbeelding kunt maken, kleuren kunt aanpassen en in realtime kunt volgen hoe een set van 5 perfect op elkaar afgestemde kleuren wordt geselecteerd. De paletten kunnen rechtstreeks in Photoshop of in Illustrator als EPS-bestand worden gedownload.

17. Grijze bit

Met GrayBit ​​kun je een website analyseren om te zien hoe deze eruitziet in grijswaarden.

Deze handige tool komt niet direct overeen met kleurthema's, maar het stelt u wel in staat uw site te analyseren om te zien hoe deze eruitziet in grijstinten. Hiermee kunt u controleren of u voldoende contrast in het kleurenpalet hebt bereikt om het gemakkelijk leesbaar te maken.

18. KLEUR

COLRD is perfect om uw kleurenschema's te delen en nieuwe te leren.

Deze kleurrijke site is een geweldige inspiratiebron, waar gebruikers hun kleurenpaletten delen, evenals verlopen en afbeeldingen. Dit is niet alleen een website met kleurenschema's, maar eerder een feest voor het esthetische gevoel, en het is zeker de moeite waard om even langs te gaan voor een paar geweldige ontdekkingen.

19. Kleurenjager

Color Hunter is een geweldige site om nieuwe kleuren te vinden.

Color Hunter helpt u snel het kleurenschema van geüploade afbeeldingen te matchen door te zoeken naar een geschikte tag of door HEX-links te gebruiken. De site is snel en gemakkelijk te gebruiken en zorgt voor interessante kleurontdekkingen.

20. Strookgenerator 2.0

Stripe Generator 2.0 helpt de aandacht te vestigen op uw kleurenschema's.

Het wordt vaak "de nieuwste tool voor web 2.0" genoemd. Stripe Generator 2.0 is een goed hulpmiddel om tegelijkertijd mooie kleurencombinaties en ongebruikelijke afbeeldingen te maken.

Kleur is een van de belangrijkste elementen in het werk van een ontwerper. Maar als concept is het vrij moeilijk om het onder de knie te krijgen: de vele combinaties van paletten maken het vaak moeilijk om te beslissen hoe de interface van webpagina's en applicaties het beste kan worden vormgegeven. Eerder publiceerden we beoordelingen van tools naar keuze en. En vandaag willen we het onderwerp uitbreiden door een vertaling van het artikel Essential Color Tools for UX Designers van Nick Babich op de blog te plaatsen.

Dit bericht bevat een lijst met de beste kleurafstemmingsservices voor websites en UX-ontwerp die u veel tijd zullen besparen. Door deze projecten leer je:

• waar inspiratie uit te halen;
• hoe u uw eigen palet kunt maken;
• hoe design toegankelijk te maken voor mensen met een visuele beperking.

1. Op zoek naar inspiratie

Kleuren van de natuur

Teken vanuit de wereld om je heen. Je hoeft alleen maar rond te kijken. Modekleding, boekomslagen, interieurontwerp... er zijn zoveel geweldige dingen om je heen. Maar de beste kleurencombinaties zijn de kleuren van de natuur. Leg een mooi moment vast en probeer je eigen selectie te maken op basis van een specifieke afbeelding.

De mooiste kleurencombinaties vind je in de natuur. Je kunt van elke foto een kleurenschema krijgen

Behance

In de populaire service vindt u interessante werken die zijn opgenomen in de beste online portfolio's van echte professionals in hun vakgebied. Deze site is ook een grote inspiratiebron. Om nieuwe waardige voorbeelden van projecten te zien, selecteert u gewoon de gewenste kleur.

Dribbel kleuren

Dribbble is een van de beste die van pas zal komen bij het maken van een gebruikersinterface. Als je visueel wilt begrijpen hoe anderen een bepaalde kleur hebben gebruikt, ga dan naar dribbble.com/colors en voer de gewenste waarde in.

Wanneer u een kleur voor de site kiest, kunt u hier het minimumpercentage instellen - experimenteer bijvoorbeeld, probeer 30% blauw in te stellen.

Probeer een minimumpercentage van een bepaalde kleur in te stellen in Dribbble

ontwerp inspiratie

Designspiration is vooral een handig hulpmiddel voor diegenen die al ideeën voor kleurencombinaties hebben en voorbeelden van dergelijke combinaties willen zien. Kies uit 1 tot 5 opties en u zult afbeeldingen vinden die overeenkomen met de opgegeven parameters.

In Designspiration vind je verschillende voorbeelden van kleurencombinaties

Tineye Veelkleurig

Met de Tineye Multicolr-kleurafstemmingsservice kunt u het gewenste beeldgamma bepalen en zelfs het percentage van elk ervan (ratio) instellen. De site is geïntegreerd met een database van 20 miljoen Creative Commons-foto's van Flickr. Dit is absoluut een van de snelste manieren om het perfecte palet te vinden.

Colorzilla

ColorZilla is een extensie voor installatie in de browsers Chrome en Mozilla Firefox. Het bevat tools zoals pipet, bladeren door paletten, maken en meer.

ColorZilla-extensie beschikbaar in Chrome en Firefox

Shutterstock-spectrum

Een van de beste manieren om een ​​idee te krijgen van hoe het kleurenschema eruit zal zien, is door naar de bijbehorende afbeeldingen te kijken. De meeste oplossingen die kleurkeuzes voor website-ontwerp bieden, bevatten deze functie, maar Shutterstock Spectrum heeft een ongelooflijk gebruiksvriendelijke interface en preview die echt van pas kan komen.

Bovendien hebt u geen abonnement nodig, aangezien een voorlopige beoordeling van de afbeelding voldoende zal zijn (zelfs ondanks het feit dat deze een "watermerk" heeft).

W3Schools

Onlangs beoordeelde een blog een selectie van W3Schools. Er is veel informatie over het onderwerp, variërend van hun namen / kleurcodes, de theorie van paletcombinaties en eindigend met een beschrijving van verschillende formaten: HEX, RGB, CMYK, HWB, enz. U vindt er ook eenvoudige generatoren, converters en soortgelijke "minidiensten". Al met al interessant om te zien.

2. Maak een kleurenpalet

Kleurgereedschap voor materiaalontwerp

Met de kleurkiezerservice van de Material Design Color Tool-site kunt u kleurenschema's voor uw selecties maken, delen en bekijken. Een van de handige functies is het meten van de mate van toegankelijkheid van elke combinatie van kleuren.

koelers

Coolors is een site voor het maken van een meerkleurenpalet. Bevestig gewoon een bepaalde kleur en druk op de spatiebalk. De tool is ook goed omdat je meer dan één resultaat krijgt, maar je kunt verschillende opties genereren door alleen de initiële gegevens te wijzigen.

Kleurenschema in Coolors op basis van foto

Adobe Color CC

Kleurafstemmingsservice Adobe Color CC (voorheen Kuler) is nu behoorlijk populair. Het is vrij beschikbaar op internet, maar er is ook een descriptorversie. Met deze webapplicatie maakt u uw palet met behulp van het kleurenwiel:

Of u kunt een specifiek resultaat krijgen van de voltooide afbeelding:

Selectie van kleur voor de site volgens de afbeelding

Er zijn hier honderden kant-en-klare combinaties, zoek ze op in de sectie "Bekijken":

Als u de desktopversie gebruikt, kunt u het door u gemaakte kleursysteem met één klik exporteren naar InDesign, Photoshop en Illustrator.

palet

Het wordt vaak vergeleken met de vorige Adobe Color CC, omdat deze ontwerpen erg op elkaar lijken. Het enige verschil is dat je in Paletton niet beperkt bent tot vijf opties, maar dat je kunt experimenteren met extra interfacetonen.

Daarnaast kun je kijken naar . Samen met anderen kun je met de applicatie overal werken, gewoon met je smartphone. Naast het direct aanmaken/exporteren van kleurenpaletten, kunt u hier bepaalde kleuren uit afbeeldingen selecteren of basisopties gebruiken.

3. Het palet toegankelijk maken

Momenteel komen kleurperceptiestoornissen veel vaker voor dan we denken. Ongeveer 285 miljoen mensen in de wereld ervaren problemen met het gezichtsvermogen. U moet altijd controleren of degene die u kiest beschikbaar is voor dergelijke gebruikers.

WebAIM Kleurcontrast Checker

Sommige tonen zijn perfect met elkaar gecombineerd, terwijl andere juist het tegenovergestelde zijn. Een groot aantal projecten doorstaat de A/A-test niet, en dit is een feit. Het is erg belangrijk om het visuele ontwerp van de interface en het contrast van tonen te controleren, vooral als er veel tekst op de pagina staat. Gebruik voor deze doeleinden bij het kiezen van de kleuren van de site.

WebAIM Color Contrast Checker is een webgebaseerde tool die kleurcodes in hexadecimale waarden controleert.

koelers

We hebben deze service hierboven al genoemd. Coolors helpt je onder andere ook bij het controleren van je verzonnen palet op kleurenblindheid.

Type kleurenblindheid in een schema

Selecteer in plaats van de modus "Normaal" het type zichtprobleem dat u wilt simuleren. Hierdoor begrijpt u precies hoe een persoon die bepaalde kleuren niet kan onderscheiden uw ontwerp zal zien.

Dit is hoe een persoon met protanomalie een palet ziet

NoCoffee Vision Simulator voor Chrome

Met behulp van de NoCoffee Vision Simulator-website kunt u zien hoe mensen met kleurenblindheid of slechtziendheid bepaalde webpagina's zullen waarnemen. Als u bijvoorbeeld de optie "Achromatopsie" opgeeft in het gedeelte "Kleurtekort", ziet u de webpagina in grijs.

Zo ziet een CNN-project eruit voor een persoon met deuteranopia

Conclusie

Alle kleuraanpassingsdiensten voor websites en UX-design die in het artikel worden genoemd, zullen je zeker helpen bij je zoektocht naar een interessant en effectief assortiment. Maar onthoud, de beste manier om te leren hoe je geweldige paletten kunt maken, is door veel te oefenen en te experimenteren.

Het kiezen van een kleurenschema voor een website is een van de belangrijkste stappen in het ontwerpproces. Het kiezen van een combinatie van kleuren is een nogal complex en creatief proces. Gelukkig zijn er veel diensten die aanzienlijke ondersteuning kunnen bieden bij het maken van de juiste keuze.

Bij sommige van de bronnen die in dit overzicht worden genoemd, kunt u kiezen uit een groot aantal kant-en-klare kleurenschema's, terwijl u met andere hulpmiddelen interactief uw eigen schema kunt bouwen.

Kuler

Adobe Kuler bevat een grote bibliotheek met vooraf gemaakte kleurenschema's. U kunt het diagram online bekijken en downloaden voor gebruik in de Adobe Creative Suite-producten.

Color Lovers heeft momenteel bijna 2 miljoen door gebruikers gemaakte kleurenschema's. U kunt ze bekijken gesorteerd op datum, waardering, aantal views.

ColoRotate heeft een bibliotheek met vooraf gemaakte kleurenschema's. Ook kunt u uw eigen schema maken met de unieke 3D-tool. Het kleurenschema kan direct worden gebruikt in Photoshop en Fireworks met behulp van de ColoRotate-plug-in.

Met de Color Scheme Designer kunt u het type kleurenschema selecteren (mono, complementair, triade, tetrad, analoog). Dan is het mogelijk om de kleuren aan te passen en het effect van het schema op een voorbeeld te zien.

ColorSchemer heeft een grote bibliotheek met door de gebruiker gemaakte kleurenschema's. U kunt ze sorteren op publicatiedatum, beoordeling of aantal downloads.

Pictaculous is een eenvoudig online hulpmiddel voor het genereren van kleurenschema's. U kunt een afbeelding uploaden en de service genereert een diagram om bij de afbeelding te gebruiken.

Kleur Spits

Color Spire is een zeer gebruiksvriendelijke service. Je kiest een basiskleur en het suggereert een kleurenschema. U kunt het uiterlijk van het schema ook zien op een eenvoudig sjabloon.

Kleur wordt veel gebruikt in ontwerp - het stelt je in staat om de inhoud te "doen herleven" - om een ​​semantische verbinding tussen elementen te creëren, om het werk te vullen met emoties en stemming. Beginnende ontwerpers kiezen willekeurige kleuren, maar er zijn manieren om kleur zinvoller te gebruiken. Overweeg 4 van dergelijke methoden, georganiseerd volgens het principe van eenvoudig tot complex.

1. Gebruik een bekend gamma

Op de website brandcolors.net zijn meer dan 500 kleurencombinaties van bekende merken verzameld. Yandex, Google, Burger King gebruiken hetzelfde palet in al hun producten. Deze merken en hun kleuren zijn bekend en geliefd bij velen. Typ de naam in de zoekbalk of blader door de pagina, klik op het gewenste merk en kleur: de code wordt gekopieerd naar het klembord.

2. Kies een kant-en-klaar professioneel palet

De eenvoudigste manier is om een ​​kant-en-klare combinatie van kleuren te nemen. Het is niet nodig om elke keer het wiel opnieuw uit te vinden, want harmonieuze combinaties zijn al lang bekend. Ga naar colordrop.io en kies. Er zijn honderden professionele 4-kleurenpaletten op de site. Nadat u degene hebt geselecteerd die u wilt, klikt en kopieert u de kleurcodes van het paneel dat aan de rechterkant wordt geopend.

Daarnaast bevat het servies een kant-en-klare selectie van 24 vlakke designkleuren. Klik links onder de naam "Flat Colors" en neem de code van de gewenste tint.

3. Bepaal het kleurenpalet van de foto of afbeelding die je leuk vindt

Deze methode is iets moeilijker. Maar ook effectiever.

• Zoek op de site coolors.co in het bovenste paneel aan de linkerkant het camerapictogram, klik erop. Er wordt een venster voor het uploaden van afbeeldingen geopend.
• U kunt vanaf uw computer een foto of afbeelding met het gewenste kleurenschema kiezen of de link naar een lege kolom kopiëren.
• De service bepaalt de combinatie van kleuren (hieronder, onder de geüploade afbeelding).
• U kunt de afzonderlijke kleuren van dit palet wijzigen door ze te markeren en een punt in de foto te selecteren waarvan u de kleur wilt overnemen.
• De knop "Collage" slaat het resulterende palet met kleurcodes op de computer op.
• De knop "Auto" genereert nieuwe combinaties op basis van dezelfde foto.
• Klik op "OK" en ga naar de hoofdpagina van de site om verder te werken met het palet.

De hoofdpagina van de site is niet minder functioneel. Hier kunt u tinten van afzonderlijke kleuren oppikken of een nieuw palet samenstellen door afzonderlijke kleuren te vervangen.

4. Creëer je eigen kleurenschema online

Door een foto te uploaden naar dezelfde site coolors.co, kun je niet alleen de kleurcode bepalen, maar ook je eigen combinaties maken. Druk hiervoor op de spatiebalk - de service maakt automatisch een combinatie van 5 kleuren.

Op elke kleur 4 knoppictogrammen:

• Alternatieve tinten - Kleurtinten (donkerder en lichter),
• Sleep (verplaats kleur naar rechts of links op het palet),
• Aanpassen (kleurtoon, verzadiging, helderheid enz. aanpassen),
• Slot (vaste kleur).