Att bygga en webbplats kan komma med några oväntade hickor, en av dem som är färg. Förstå färgval, och hur färger kan göra på olika datorer är det första steget för att se till att din webbplats har det utseende du tänkte.
Förutom att hitta och välja färger som fungerar för dig är det klokt att utveckla och hantera ett färgschema för ditt projekt. Det är enkelt att skapa en uppsättning swatches i vanlig bildprogramvara, som till exempel Adobe Photoshop eller Illustrator, och organisera färger på ett sådant sätt att de är lätta att hitta och använda.
Gilla artikeln? Var noga med att prenumerera på vårt RSS-flöde och följ oss på Twitter för att hålla dig uppdaterat om det senaste innehållet.
Förstå webbfärg
Färger på webben görs genom att blanda kombinationer av röda, gröna och blåa nyanser; Denna form av färgblandning kallas RGB-färg. Varje färgton representeras av ett talvärde från 0 till 255 och varje unik färg har ett värde för rött, grönt och blått. Svart har till exempel inget färgvärde vilket ger ett färg RGB-värde på 0, 0, 0. Den första siffran refererar alltid till rött värde, det andra till det gröna och det tredje till det blå.
Eftersom det finns 256 varianter av varje nyans, är 16 miljoner färgkombinationer möjliga med hjälp av RGB-system. De flesta datorer idag hanterar alla 16 miljoner färgvärden och visar dem exakt. Det finns några som fortfarande följer den gamla listan över 216? Webbsäker? färger som utvecklades så färger skulle göra exakt på maskiner med en 256 färgpalett. Denna standard har i stort sett försummat med framsteg inom skärm- och färgteknik.
När du skapar färger kan du ha möjlighet att skapa varje nyans med ett RGB-värde eller med en hexadecimal notering eller HEX-värde. Färg HEX-värden identifieras med sex tecken föregående med ett # tecken. HEX-värdena använder en kombination av siffror och bokstäver; 0 är det lägsta värdet och FF (255) är högst. Var och en av de sex tecknen i HEX-värdet motsvarar siffrorna i RGB-värdet. Svart har ett HEX-värde av # 000000.
Vidare definieras 147 färger med namn för HTML- och CSS-applikationer, enligt w3schools.com, som har en tabell som specificerar varje färg med namn och värde. Det finns 17 standardfärger - aqua, svart, blå, fuchsia, grå, grå, grön, lime, rödbrun, marinblå, oliv, lila, röd, silver, kricka, vit och gul. Var och en har ett specifikt RGB- och HEX-värde. Maroon har till exempel ett RGB-värde av 128, 0, 0 och HEX-värde av # 800000; silver är 192, 192, 192 eller # C0C0C0.
Skapa färgfärger
Ibland låter ett färgschema lättare än det är. Beroende på komplexiteten hos en webbdesign kan en handfull till en regnbåg av färger behövas för att få önskad effekt. Vissa designers har en förmåga för färgparing och skapar ett schema från början. andra kommer att hitta inspiration från andra webbplatser eller externa källor (t.ex. bläddra i färgchips i en hårdvaruaffär eller matchande färger som finns i naturen).
Färgscheman utvecklas på många olika sätt baserat på designerens tankprocesser. Medan vissa har ögat att skapa färger på flugan, bläddra igenom en färgbok eller använda färg från ett foto är vanliga sätt att utveckla ett system. När du skapar ett färgschema, se till att du noterar färgkombinationerna för varje del av din webbplats, till exempel rubrik, bakgrund, navigeringsfält, sidofält, textfärger och länkar.
För att använda färger som du har hittat på andra ställen, ta ett digitalt foto och öppna det i bildredigeringsprogram som Adobe Photoshop. Zooma in på bilden tills pixlarna är tydligt synliga och använd eyedropper-verktyget för att välja nyanser du gillar och skriv ner sina färgvärden.
Importera färgstämplar
Inte alla designers börjar från början med ett färgschema. Det finns en mängd gratis verktyg på nätet som tillåter användare att utveckla, ladda ner och importera en färgpalett på några minuter. Färgscheman kan skapas med en enda färg som hittar komplementära nyanser eller från att använda ett foto eller en annan bild. Leta efter ett verktyg som ger den exakta färgblandningen för nedladdning och är kompatibel med din datorprogram. Här är några enkla alternativ för ditt nästa projekt.
ColorBlender
ColorBlender skapar en snabb palett med sex färger som designers kan ladda ner som ett Photoshop färgbord, Illustrator EPS eller har skickat som ett e-postmeddelande för att blanda manuellt och använda i andra program. Färger matchas med ett bildverktyg för varje RGB-värde. Blandningarna är trevliga och har mycket utbud. Du kan också ange ett värde för en färg du älskar som utgångspunkt. Ingenting är förinställt, du kan redigera varje färgval och matcha även PANTONE-färger.
ColorCombos.com
ColorCombos.com har ett stort bibliotek med förinställda färgkombinationer som kommer i form av femfärgsscheman som kan sökas efter nyans. Varje visar HEX, RGB och jämn CMYK (för utskriftsprojekt) värden för varje färg. Scheman kan hämtas som en .png-fil. Använd eyedropper-verktyget till extra och spara varje färgvärde. Sidan tillåter också användare att skapa egna färgkombinationer.
Color Palette Generator
Color Palette Generator är den automatiska versionen av hur man skapar ett färgschema från ett foto eller en bild. Användare kan välja en av de förinställda bilderna eller ladda upp egna för att få en anpassad palett med nio färger från bilden. Färgkombinationer är fina men kan inte hämtas. Håll musen över varje nyans för sitt HEX-värde. RGB-värden är inte angivna.
Färgscheman Designer
Color Scheme Designer kan vara det mest visuella verktyget där ute. Det skapar ett fyrfärgschema som många andra program men låter användarna förhandsgranska hur det här schemat kan användas på deras webbplats, baserat på exempel på ljus och mörk sida. På webbplatsen kan användarna blanda färger med ett stort färghjul och scheman utvecklas med flera alternativ för mono-, komplementära, triad-, tetrad-, analoga och accenterade paletter.Webbplatsen har också de flesta alternativen för nedladdning format, inklusive HTML, XML, text och Photoshop palett alternativ. Varje färgvärde har HEX- och RGB-värden tillgängliga.
Swatch Organisation
Det enklaste sättet att hantera och organisera färgrar i Adobe Photoshop och Illustrator är genom swatchbibliotek. Du kan ställa in specifika färgscheman och spara och öppna dem för vissa projekt. (Adobe-produkter kommer också ut ur rutan med några förinställda bibliotek som är ganska trevliga, inklusive några Pantone-korrigeringssatser för CMYK-applikationer.)
Om du vill lägga till dina nya färger i ett swatch-bibliotek öppnar du paletten Färger i fönstret. Det som öppnas är standard korrigeringspalett. (Du kan se andra alternativ genom att klicka på fliken expandera. Varje alternativ dyker upp ett annat fönster.) Välj? Ny swatch? att lägga till en anpassad färgmix eller? laddningsstämplar? för att importera ett nedladdat färgschema. Ordna färger i paletten Färger på det sätt som fungerar för dig och spara. Efter att ha sparats kan de nya färgproverna laddas och användas när som helst.
Att ha en uppsjö av färgprov kan vara besvärlig. Tänk på att skapa en ny fil för varje projekt som du kommer att gå tillbaka till flera gånger. Håll palettarna små och ta bort färger som du inte ska använda. Namnfärger på ett sätt som gör det enkelt för dig att komma ihåg sina applikationer. Till exempel i swatch biblioteket? Min hemsida ,? namnge varje färgstämpel baserat på hur den används, i stället för RGB-värdena.
Spara inte färgstickor i ett bibliotek för engångsapplikationer. Det kräver onödig tid; Bibliotek används bäst för återkommande projekt eller färger. Kom ihåg att ta bort oanvända färger från färgbiblioteken för projekt som du skickar till kunder för att hålla dina filer rena och organiserade.
Slutsats
Det första steget för att skapa bra färg för ditt nästa projekt, på webben eller på utskriften, är att förstå hur färg fungerar och hur man skapar ett schema som kommer att ha gratis toner. Att veta vad siffrorna förknippade med färger betyder hjälper dig att skapa (eller till och med stjäla) prickar med lätthet.
Spela med färg för att skapa kombinationer som är projektanpassade. När du har en uppsättning färger att arbeta med, är det ett måste att hålla dina färgprov organiserade för att förbättra ditt arbetsflöde. Använd de organisatoriska verktygen i Adobe Creative Suite för att få ut det mesta av sitt inbyggda färghanteringssystem. Gruppera och namnge färger på sätt som synkroniseras med hur de ska användas.
Bildkällor: alikiner och IvanWalsh.com.