Webkleurenpaletten

Wat zijn webkleurenpaletten?

Kleuren zijn erg belangrijk voor webdesigners en grafisch ontwerpers. Ontwerpers beschrijven de kleuren die we in het dagelijks leven omschrijven als blauw, rood en groen met codes als #fff002, #426215. Het maakt niet uit welk type codeerproject je onderneemt, je zult waarschijnlijk op een gegeven moment met kleuren gaan werken. Dit is vooral handig als je leert coderen met HTML, zoals veel mensen doen om webpagina's te ontwerpen.

Wat betekent Hex-code in kleuren?

Hex-code is een manier om een ​​kleur in RGB-indeling weer te geven door drie waarden te combineren. Deze kleurcodes vormen een integraal onderdeel van HTML voor webdesign en blijven een belangrijke manier om kleurformaten digitaal weer te geven.

Hex-kleurcodes beginnen met het hekje of de hashtag (#) gevolgd door zes letters of cijfers. De eerste twee letters/cijfers komen overeen met rood, de volgende twee met groen en de laatste twee met blauw. Kleurwaarden worden gedefinieerd in waarden tussen 00 en FF.

Getallen worden gebruikt wanneer de waarde 1-9 is. Letters worden gebruikt wanneer de waarde groter is dan 9. Bijv.:

• A = 10
• B = 11
• C = 12
• D = 13
• E = 14
• F = 15

Hex-kleurcodes en RGB-equivalenten

Het onthouden van enkele van de meest voorkomende hexadecimale kleurcodes kan nuttig zijn om u te helpen beter te voorspellen welke andere kleuren zullen zijn wanneer u de hexadecimale kleurcode ziet, niet alleen wanneer u die exacte kleuren wilt gebruiken.

• Rood = #FF0000 = RGB (255, 0, 0)
• Groen = #008000 = RGB (1, 128, 0)v
• Blauw = #0000FF = RGB (0, 0, 255)
• Wit = #FFFFFF = RGB (255,255,255)
• Ivoor = #FFFFF0 = RGB (255, 255, 240)
• Zwart = #000000 = RGB (0, 0, 0)
• Grijs = #808080 = RGB (128, 128, 128)
• Zilver = #C0C0C0 = RGB (192, 192, 192)
• Geel = #FFFF00 = RGB (255, 255, 0)
• Paars = #800080 = RGB (128, 0, 128)
• Oranje = #FFA500 = RGB (255, 165, 0)
• Bourgondië = #800000 = RGB (128, 0, 0)
• Fuchsia = #FF00FF = RGB (255, 0, 255)
• Limoen = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Blauwgroen = #008080 = RGB (0, 128, 128)
• Olijf = #808000 = RGB (128, 128, 0)
• Marineblauw = #000080 = RGB (0, 0, 128)

Waarom zijn websitekleuren belangrijk?

Je denkt misschien dat je geen last hebt van kleuren, maar volgens een onderzoek zegt 85% van de mensen dat kleur een grote impact heeft op het product dat ze kopen. Hij zegt ook dat wanneer sommige bedrijven hun knopkleuren veranderen, ze een sterke toename of afname in hun conversies hebben opgemerkt.

Beamax, een bedrijf dat projectieschermen produceert, zag bijvoorbeeld een enorme toename van 53,1% in klikken op rode links in vergelijking met blauwe links.

Kleuren hebben niet alleen een enorme impact op kliks, maar ook op merkherkenning. Uit een onderzoek naar de mentale impact van kleuren bleek dat kleuren de merkherkenning met gemiddeld 80% verhogen. Als je bijvoorbeeld aan Coca-Cola denkt, denk je waarschijnlijk aan levendige rode blikjes.

Hoe kies je een kleurenschema voor websites?

Om te beslissen welke kleuren je moet kiezen op je website of webapplicatie, moet je eerst goed begrijpen wat je verkoopt. Als u bijvoorbeeld een hoogwaardige afbeelding van hogere kwaliteit wilt bereiken, moet u paars kiezen. Als u echter een breder publiek wilt bereiken, blauw; Het is een geruststellende en zachte kleur die zeer geschikt is voor gevoeligere onderwerpen zoals gezondheid of financiën.

Bovenstaande voorbeelden zijn door vele onderzoeken bewezen. Maar de kleur die je kiest voor je website hangt af van de complexiteit van je ontwerp en de soorten kleurencombinaties. Als u bijvoorbeeld een monochroom webdesignpalet gebruikt, heeft u mogelijk zeven of meer tinten van die kleur nodig om voldoende variatie op het scherm te krijgen. U moet kleuren instellen voor bepaalde delen van uw site, zoals tekst, achtergronden, links, zweefkleuren, CTA-knoppen en kopteksten.

Nu "Hoe kies je een kleurenschema voor websites en webapplicaties?" Laten we het stap voor stap bekijken:

1. Kies je primaire kleuren.

De beste manier om een ​​primaire kleur te kiezen, is door de kleuren te onderzoeken die passen bij de sfeer van uw product of dienst.

Hieronder hebben we enkele voorbeelden voor u op een rij gezet:

• Rood: het betekent opwinding of geluk.
• Oranje: het staat voor een vriendelijke, leuke tijd.
• Geel staat voor optimisme en geluk.
• Groen: Het betekent versheid en natuur.
• Blauw: staat voor betrouwbaarheid en zekerheid.
• Paars: staat voor een gerenommeerd merk met een geschiedenis van kwaliteit.
• Bruin: Het betekent een betrouwbaar product dat door iedereen kan worden gebruikt.
• Zwart betekent luxe of elegantie.
• Wit: verwijst naar stijlvolle, gebruiksvriendelijke producten.

2. Kies uw extra kleuren.

Kies een of twee extra kleuren die bij je hoofdkleur passen. Dit zouden idealiter de kleuren moeten zijn die uw hoofdkleur "prachtig" maken.

3. Selecteer een achtergrondkleur.

Kies een achtergrondkleur die minder "agressief" is dan uw primaire kleur.

4. Selecteer de letterkleur.

Kies een kleur voor de tekst op je website. Merk op dat een effen zwart lettertype zeldzaam is en niet wordt aanbevolen.

De beste webkleurenpaletten voor ontwerpers

Als u de kleur die u zoekt niet kunt vinden in de collectie van Softmedal webkleurenpaletten, kunt u een kijkje nemen op de alternatieve kleurensites hieronder:

Kleurselectie is een langdurig proces en vereist vaak veel fine-tuning om de juiste kleuren te vinden. Op dit punt kunt u tijd besparen door 100% gratis webapplicaties te gebruiken die de relevante kleurenschema's helemaal opnieuw creëren.

1. Palet

Paletton is een webapplicatie die alle webdesigners zouden moeten kennen. Voer gewoon een zaadkleur in en de app doet de rest voor u. Paletton is een betrouwbare keuze en een geweldige web-app voor degenen die niets weten over design en voor beginners.

2. Kleurveilig

Als WCAG een punt van zorg is in uw ontwerpproces, is Color Safe de beste tool om te gebruiken. Met deze webapplicatie kunt u kleurenschema's maken die perfect in elkaar overlopen en een rijk contrast bieden volgens de WCAG-richtlijnen.

Door gebruik te maken van de Color Safe webapp zorgt u ervoor dat uw site voldoet aan de WCAG-richtlijnen en voor iedereen volledig toegankelijk is.

3. Adobe Color CC

Het is een van de gratis Adobe-tools die zijn gemaakt voor openbaar gebruik. Het is een uitgebreide webtoepassing waarmee iedereen helemaal opnieuw kleurenschema's kan maken. Hiermee kunt u kiezen uit veel verschillende kleurmodellen die het beste bij uw behoeften passen. De interface lijkt in het begin misschien wat verwarrend, maar als je er eenmaal aan gewend bent, zou je geen probleem moeten hebben om mooie kleuropties te kiezen.

4. Sfeer

Ambiance, een gratis webtoepassing, biedt kant-en-klare webkleurenpaletten van andere kleurensites op internet. Het werkt als een traditionele web-app waar u kleuren in uw profiel kunt opslaan en uw eigen schema's helemaal opnieuw kunt maken. Al deze webkleurenpaletten komen van Colorlovers. De Ambiance-interface maakt browsen eenvoudiger en legt meer nadruk op het samenspel van kleuren voor UI-ontwerp.

5. 0tot255

0to255 is niet echt een generator voor kleurenschema's, maar het kan u helpen bij het verfijnen van bestaande kleurenschema's. De web-app toont je alle verschillende tinten, zodat je kleuren direct kunt mixen en matchen.

Als u het moeilijk vindt om een ​​bruikbaar kleurenschema te maken, kunt u enkele van de bovenstaande toepassingen bekijken.

De beste webkleurenpaletten

De volgende sites gebruiken met groot succes verschillende webkleurenpaletten. Ze zijn zorgvuldig geselecteerd op de emoties die ze oproepen en de emoties die ze overbrengen.

1. Odopod

Odopod is ontworpen met een eentonig kleurenpalet, maar was bedoeld om er niet saai uit te zien met een verloop op de startpagina. Grote typografie biedt een groot contrast. Het is duidelijk waar bezoekers willen dat ze klikken.

2. Tori's oog

Tori's Eye is een geweldig voorbeeld van een monochroom kleurenschema. Hier worden de effecten gezien van een eenvoudig maar krachtig kleurenpalet, gecentreerd rond groene tinten. Dit kleurenschema is meestal gemakkelijk uit te voeren, omdat een tint van een kleur bijna altijd zal werken met een andere tint van dezelfde kleur.

3. Kaas Survival Kit

Rood is een extreem populaire kleur voor het kleurenpalet van een website. Het kan een rijke mix van emoties overbrengen, waardoor het veelzijdig is. Zoals je kunt zien op de Cheese Survival Kit-website, is het vooral krachtig wanneer het in kleine doses wordt gebruikt. Rood wordt verzacht door meer neutrale kleuren en blauw helpt bij CTA's en andere gebieden waar het bedrijf de aandacht van de bezoeker wil trekken.

4. Ahrefs

Ahrefs is een voorbeeld van een website die het kleurenpalet vrijelijk gebruikt. Donkerblauw is de overheersende kleur, maar er zijn overal op de site variaties. Hetzelfde geldt voor de kleuren oranje, roze en turquoise.

Meest gestelde vragen over kleuren

1. Wat is de beste kleur voor een website?

Blauw is absoluut de veiligste keuze, aangezien het met 35% de meest populaire kleur is. Als uw concurrenten echter allemaal blauw gebruiken, kan het zinvol zijn om uw aanbod en merk te "differentiëren". Maar je moet ervoor zorgen dat je bezoekers niet overweldigt.

2. Hoeveel kleuren moet de website hebben?

Bedenk dat 51% van de merken monochrome logo's heeft, 39% twee kleuren gebruikt en slechts 19% van de bedrijven de voorkeur geeft aan full colour logo's. Vanaf hier kun je zien dat websites met 1, 2 en 3 kleuren logischer zijn dan proberen een website met regenboogkleuren te maken. Merken als Microsoft en Google geloven echter in het voordeel van het werken met meer kleuren, aangezien ze minstens 4 effen kleuren gebruiken in hun ontwerpen.

3. Waar moet ik de kleuren gebruiken?

Opvallende kleuren moeten spaarzaam worden gebruikt, anders verliezen ze hun effect. Dit effect moet in conversiepunten zitten, zoals de "Koop nu"-knoppen.