Att välja färgschema för en webbplats är en av viktiga punkter i designprocessen. Att välja en färgkombination är en ganska komplex och kreativ process. Lyckligtvis finns det många tjänster som kan ge ett betydande stöd för att göra rätt val.

Några av de resurser som nämns i denna recension ger ett urval av stor mängd färdiga färgscheman, medan andra låter dig interaktivt bygga ditt eget schema.

Kylare

Adobe Kuler innehåller stort bibliotek färdiga färgscheman. Du kan se diagrammet online och ladda ner det för användning i Adobe Creative Suite-produkter.

Color Lovers har för närvarande nästan 2 miljoner användarskapade färgscheman. Du kan se dem genom att sortera efter datum, betyg, antal visningar.

ColoRotate har ett bibliotek med färdiga färgscheman. Du kan också skapa ditt eget diagram med hjälp av ett unikt 3D-verktyg. Färgschemat kan användas direkt i Photoshop och Fireworks med hjälp av insticksprogrammet ColoRotate.

Color Scheme Designer låter dig välja typ av färgschema (mono, komplementär, triad, tetrad, analog). Sedan kan du justera färgerna och se effekten av schemat med hjälp av ett exempel.

ColorSchemer har ett stort bibliotek med användarskapade färgscheman. Du kan sortera dem efter postdatum, betyg eller antal nedladdningar.

Pictaculous är ett enkelt verktyg för att skapa färgscheman online. Du kan ladda upp en bild och tjänsten genererar ett diagram att använda med bilden.

Färg Spire

Color Spire är en mycket lättanvänd tjänst. Du väljer en grundfärg och den föreslår ett färgschema. Du kan också se utseende diagram på en enkel mall.

Färg är en av de mest viktiga element i en designers arbete. Men som koncept kan det vara ganska svårt att bemästra: på grund av de många kombinationerna av paletter är det ofta svårt att avgöra hur man bäst ska utforma gränssnittet för webbsidor och applikationer. Vi har tidigare publicerat recensioner av valfria verktyg och . Och idag vill vi utöka ämnet genom att lägga upp en översättning av artikeln Essential Color Tools for UX Designers av Nick Babich på bloggen.

Anteckningen innehåller en lista bästa tjänsterna färgval för webbplatser och UX-design, vilket hjälper dig att spara mycket tid. Genom dessa projekt kommer du att lära dig:

• var man kan hämta inspiration ifrån;
• hur du skapar din egen palett;
• hur man gör design tillgänglig för personer med färgsynsnedsättning.

1. Söker inspiration

Naturens färger

Rita från världen omkring dig. Allt du behöver göra är att se dig omkring. Moderiktiga kläder, bokomslag, inredning... det finns så många fantastiska saker omkring dig. Men de bästa färgkombinationerna är naturens färger. Fånga ett vackert ögonblick och prova att skapa ditt eget urval baserat på en specifik bild.

De bästa färgkombinationerna finns i naturen. Du kan få ett färgschema från vilket foto som helst

Behance

I denna populära tjänst hittar du intressanta verk som ingår i de bästa onlineportföljerna av riktiga proffs inom sitt område. Den här sidan är också en stor inspirationskälla. För att se nya värdiga exempel på projekt, välj helt enkelt den färg du vill ha.

Dribbla färger

Dribbble är en av de bästa som kommer väl till pass när man skapar ett användargränssnitt. Om du visuellt vill förstå hur andra har använt en viss färg, gå till dribbble.com/colors och ange det värde du vill ha.

När du väljer en färg för en webbplats kan du här ställa in dess lägsta procentandel - experimentera, till exempel, prova att ställa in 30 % blått.

Försök att ställa in en minsta procentandel av en specifik färg i Dribbble

Designspiration

Designinspiration användbart verktyg främst för dig som redan har idéer om färgkombinationer och som vill se exempel på sådana kombinationer. Välj från 1 till 5 alternativ så hittar du bilder som matchar de angivna parametrarna.

I Designspiration hittar du olika exempel färgkombinationer

Tineye Multicolr

Med hjälp av Tineye Multicolrs färgmatchningstjänst kan du bestämma önskat gamma för bilden och till och med ställa in procentandelen för var och en av dem (förhållande). Sajten är integrerad med en databas med 20 miljoner Creative Commons-bilder från Flickr. Detta är definitivt en av de mest snabba sätt hitta i den perfekta paletten.

Colorzilla

ColorZilla – tillägg för installation i Chrome webbläsare Och Mozilla Firefox. Den innehåller verktyg som pipett, bläddring i palett, skapande och mer.

ColorZilla-tillägget tillgängligt i Chrome och Firefox

Shutterstock Spectrum

Ett av de bästa sätten att föreställa sig hur ett färgschema kommer att se ut är att titta på motsvarande bilder. De flesta lösningar som erbjuder färgval för webbdesign inkluderar denna funktion, men Shutterstock Spectrum har ett otroligt användarvänligt gränssnitt och förhandsvisning som verkligen kan vara användbar.

Dessutom behöver du inte ett abonnemang, eftersom en preliminär bedömning av bilden kommer att räcka (även trots att det finns en "vattenstämpel" på den).

W3Schools

Nyligen granskade bloggen ett urval från W3Schools. Det finns mycket information samlad där om ämnet, med början från deras namn/koder för nyanser, teorin om att kombinera paletter och slutar med en beskrivning av olika format: HEX, RGB, CMYK, HWB, etc. Du hittar också enkla generatorer, omvandlare och liknande ”minitjänster”. Sammantaget intressant att se.

2. Skapa en färgpalett

Material Design Färgverktyg

Med Material Design Color Tool kan du skapa, dela färgscheman och se ett grovt användargränssnitt för dina val. En av dess användbara funktioner är att mäta tillgänglighetsnivån för alla färgkombinationer.

Kylare

Coolors är en webbplats för att skapa en flerfärgspalett. Fäst bara en specifik färg och tryck på mellanslagstangenten. Verktyget är också bra eftersom du kommer att få mer än ett resultat, men du kan generera flera alternativ genom att bara ändra de initiala uppgifterna.

Färgschema i Coolors baserat på foto

Adobe Color CC

Färgmatchningstjänsten Adobe Color CC (tidigare Kuler) är nu ganska populär. Den är fritt tillgänglig på Internet, men det finns också en desektorversion. Med denna webbapplikation gör du din egen palett med hjälp av färghjulet:

Eller så kan du få ett visst resultat från den färdiga bilden:

Välja färger för en webbplats baserat på en bild

Det finns hundratals färdiga kombinationer här, leta efter dem i avsnittet "Titta":

Om du använder skrivbordsversionen kan du exportera färgsystemet du skapade till InDesign, Photoshop och Illustrator med ett klick.

Paletton

Det jämförs ofta med tidigare Adobe Color CC då designen är väldigt lika. Den enda skillnaden är att i Paletton är du inte begränsad till fem parametrar, utan kan experimentera med ytterligare gränssnittstoner.

Dessutom kan du titta på. Tillsammans med andra låter applikationen dig arbeta var som helst, helt enkelt med din smartphone. Förutom de direkta uppgifterna att skapa/exportera färgpaletter kan du här välja specifika färger från bilder eller använda grundläggande alternativ.

3. Gör paletten tillgänglig

Nuförtiden är färgsynstörningar mycket vanligare än vi inser. Omkring 285 miljoner människor i världen upplever synproblem. Du bör alltid kontrollera om den du väljer är tillgänglig för sådana användare.

WebAIM färgkontrastkontroll

Vissa toner går bra med varandra, medan andra är helt tvärtom. Stort antal projekt klarar inte A/A-testet, och det är ett faktum. Det är mycket viktigt att kontrollera den visuella designen av gränssnittet och kontrasten i toner, särskilt om det finns mycket text på sidan. För dessa ändamål, använd när du väljer webbplatsfärger.

WebAIM Color Contrast Checker är ett webbverktyg som kontrollerar färgkoder i hexadecimala värden.

Kylare

Vi har redan nämnt den här tjänsten ovan. Bland annat hjälper Coolors dig även att kontrollera din påhittade palett för färgblindhet.

Typ av färgblindhet i diagrammet

Istället för normalt läge väljer du den typ av synproblem du vill simulera. Som ett resultat kommer du att förstå exakt hur en person som inte kan skilja mellan vissa färger kommer att se din design.

Så här ser en person med protanomali en palett

NoCoffee Vision Simulator för Chrome

Med hjälp av NoCoffee Vision Simulator-webbplatsen kan du se hur personer med färgblindhet eller nedsatt syn kommer att uppfatta vissa webbsidor. Till exempel, om du anger parametern "Achromatopsia" i avsnittet "Färgbrist", kommer du att se webbsidan i grått.

Så här ser ett CNN-projekt ut för en person med deuteranopi.

Slutsats

Alla webbsidors färgmatchning och UX-designtjänster som nämns i artikeln kommer definitivt att hjälpa dig i ditt sökande efter en intressant och effektiv palett. Men kom ihåg: bästa sättet lär dig hur du skapar fantastiska paletter - öva och experimentera mycket.

Färger spelar en stor roll i webbdesign. För att korrekt välja ett färgschema för en webbplats finns det speciella tjänster. Jag är säker på att varje webbdesigner har minst en av dessa i sina bokmärken.

Ibland sitter du och funderar på vilken blå nyans du ska välja som huvudnyans för sajten, lite ljusare eller lite ljusare, eller kanske mörkare... Och du behöver fortfarande välja ytterligare för det. Du kan naturligtvis göra detta med ögat, men det är bättre att använda någon av specialtjänsterna.

Jag kommer inte att prata om färglära (detta är för mycket information), utan kommer helt enkelt att publicera här de tjänster som jag har i mina bokmärken och som jag använder.

Jag har varit vän med detta instrument i många år. Det mest bekväma verktyget för att välja färger (enligt min mening). Han har mycket ytterligare funktioner. Du kan till exempel se ett exempel på en ljus och mörk sida med utvalda färger.

Det är möjligt att utvärdera hur personer med färgblindhet och andra synnedsättningar kommer att se ditt färgschema. Du kan välja webbsäkra färger.

Adobe Kuler är det andra webbverktyget som jag använder ganska ofta. Urvalet av färgscheman är nästan detsamma som på föregående sida, men det är inte därför jag älskar det. Förutom att skapa färgscheman själv kan du titta på och använda scheman som andra människor har skapat.

För att göra detta, klicka på knappen i den övre vänstra menyn "Titta". Och ett galleri av alla möjliga sorter färgkombinationer.

Det här verktyget liknar lite Colorscheme, men har färre funktioner, men du kan se hur färgblock kommer att se ut.

Jag använder praktiskt taget inte den här sidan, men eftersom jag har den i mina bokmärken, bestämde jag mig för att lägga till den också.

Följande två webbplatser genererar en palett från bilden du väljer. Det är magiskt :)

Du väljer vilken bild vars färger du gillar, tjänsten analyserar den och ger den till dig färgpalett. Den enda skillnaden mellan dessa två webbplatser är hur de tillhandahåller bilden.

Denna webbplats kräver ladda ner bild från din dator.

Ett mycket bekvämt verktyg för färgval. Baserat på principen "Gilla - Ogilla".

flatcolors.net

Som namnet antyder kan du här välja färger för den nu fashionabla platta designen. Webbplatsen är intressant eftersom när du väl har valt en palett kan du ladda ner den för Corel och Photoshop.

materialpalette.com

En annan modetrend- materialdesign. Den här sidan hjälper dig att välja färgkombinationer för UI (användargränssnitt). Dessutom har webbplatsen en stor uppsättning ikoner.

Och slutligen, användargränssnittet igen. Här är bara en uppsättning färger för UI-design. Genom att klicka på valfri färg kan du se hur vit text kommer att läsas mot en viss bakgrund.

Det här är verktygen jag har i mina bokmärken.

Skriv i kommentarerna vilka färgvalsajter för webbdesign använder du?

Behöver en hemsida med rätt färger? , låt oss göra det :)

Hittade du ett misstag? Välj ett textstycke och klicka CTRL+ENTER

Färg används ofta i design - det låter dig "återuppliva" innehållet - skapa en semantisk koppling mellan element, fyll arbetet med känslor och humör. Nybörjardesigners väljer slumpmässiga färger, men det finns sätt att använda färg på mer meningsfulla sätt. Låt oss överväga 4 sådana metoder, organiserade enligt principen från enkla till komplexa.

1. Använd en känd skala

Webbplatsen brandcolors.net innehåller mer än 500 färgkombinationer av kända varumärken. Yandex, Google, Burger King använder samma palett i alla sina produkter. Dessa märken och deras färger är bekanta och älskade av många. Skriv namnet i sökfältet eller bläddra igenom sidan, klicka på önskat märke och färg: dess kod kommer att kopieras till urklippet.

2. Välj en färdig professionell palett

Det enklaste sättet är att ta en färdig färgkombination. Det är inte nödvändigt att uppfinna hjulet på nytt varje gång, eftersom harmoniska kombinationer har varit kända under lång tid. Gå till colordrop.io och välj. Det finns hundratals professionella 4-färgspaletter på webbplatsen. När du har valt den du vill ha, klicka och kopiera färgkoderna från panelen som öppnas till höger.

Dessutom innehåller tjänsten ett färdigt urval av 24 platta designfärger. Klicka till vänster under namnet "Flat färger" och ta koden för den nyans du gillar.

3. Bestäm färgpaletten för fotografiet eller bilden du gillar

Denna metod är lite mer komplicerad. Men också mer effektivt.

• På webbplatsen coolors.co, i den övre vänstra panelen, hitta kameraikonen och klicka på den. Ett bilduppladdningsfönster öppnas.
• Du kan välja ett foto eller en bild med det färgschema du gillar från din dator eller kopiera länken till en tom kolumn.
• Tjänsten avgör färgkombinationen (nedan under den uppladdade bilden).
• Du kan ändra individuella färger i den här paletten genom att markera dem och välja en punkt i fotot som du vill ta färgen från.
• Knappen "Collage" sparar den resulterande paletten med färgkoder på datorn.
• "Auto"-knappen genererar nya kombinationer baserat på samma foto.
• Klicka på "Ok" och gå till sidans huvudsida för vidare arbete med paletten.

Sidans huvudsida är inte mindre funktionell. Här kan du välja nyanser av individuella färger eller skapa en ny palett genom att ersätta enskilda färger.

4. Skapa ditt eget färgschema online

Genom att ladda upp ett foto till samma sida coolors.co kan du inte bara bestämma färgkoden, utan också skapa dina egna kombinationer. För att göra detta, tryck på mellanslagstangenten - tjänsten skapar automatiskt en kombination av 5 färger.

På varje färg 4 ikonknappar:

• Alternativa nyanser - Nyanser av färg (mörkare och ljusare),
• Dra (Flytta en färg till höger eller vänster i paletten),
• Justera (Justera nyans, mättnad, ljusstyrka, etc.),
• Lås (fixa färg).

Vi introducerar ett användbart urvalsverktyg färgomfång– Ittens färgcirkel.

vad är det?

Kort sagt är det här tre skivor placerade på samma axel, på vars ytor alla primära färger i ljusspektrumet visas, samt maximalt möjliga antal nyanser och en kontrastskala.

Det relativa arrangemanget av färger, nyanser, slitsar och indikatorer på cirkeln implementeras baserat på lagarna "koloristik" (färgteorier), så med dess hjälp är det mycket bekvämt att välja harmoniska kombinationer av nyanser där det behövs.

Det vill säga, i själva verket är det ett "live", materialfuskblad där alla huvudfärgscheman visas. "Live" eftersom du kan plocka upp den, till skillnad från bilden på skärmen.

Färghjulsenhet

Designersidan Konstnärens sida

Köpa

Naturligtvis måste du veta hur man använder en sådan till synes komplex enhet, så på vår webbplats kan du inte bara köpa ett färghjul, utan också bekanta dig med dess struktur i detalj, läs instruktioner om hur du använder den, titta på olika videor om detta ämne.

Vi rekommenderar också att du bekantar dig med onlinetjänsten för val av färger i kläder.

Cirkel för att välja färgkombinationer

Föregångaren till denna enhet i sin modern formär Ittens färgring (se bild nedan).

Det var Johannes Itten som var först med att peka ut exakt tolv färger från hela spektrat och ordna dem runt en cirkel på ett sådant sätt att paren som kontrasterar så mycket som möjligt står mitt emot varandra. I mitten placerade han en triangel med tre primärfärger - röd, blå och gul (det är från dem som alla andra kan erhållas genom att blanda i olika proportioner). Itten omslöt denna triangel i en hexagon, inuti vilken han angav vilka nyanser som skulle erhållas genom att blanda primära färger i lika proportioner.

Det vill säga, det första informationsmeddelandet som en sådan layout bär är riktat till nybörjarkonstnärer - de kan tydligt se resultatet av att blanda olika färger.

Låt oss titta på den här punkten lite mer detaljerat...

Varför finns det tolv primärfärger?

• Som du kan se i figuren ovan finns det tre primär färger (även kallade primärfärger).
• Genom att blanda dem i par i lika stora proportioner kan du få tre sekundär, totalt - sex.
• Blandning primär med en granne i en cirkel sekundär ger tertiär färg. Detta ger oss ytterligare sex kombinationer, för totalt - tolv.(Dessutom kan tertiära färger erhållas genom att blanda primärfärger i olika proportioner)

Naturligtvis räcker inte tolv färger för att navigera i den omgivande variationen av färger och hitta den önskade nyansen, eller se vad som händer när man blandar inte angränsande, utan helt godtyckliga färger. Därför är de cirklar som du kan hitta på rea eller beställning på den här webbplatsen mer komplexa och innehåller mycket mer användbar informationän en enkel "tolvdelad Itten-ring".

Guide till att blanda färger

Med dess hjälp kan du bestämma resultatet av att blanda godtyckliga färger och nyanser - antalet kombinationer är tillräckligt för att konstnären ska förstå vilka färger som måste blandas för att få en given nyans. Detta är ett underbart rithjälpmedel, speciellt för nybörjarkonstnärer.

Även om nyansen är något annorlunda än den önskade, kan det önskade resultatet uppnås genom att ändra proportionerna av blandade färger.

Hur kan samma proportioner bestämmas? Är det verkligen slumpmässigt? Nej, färghjulet kan också hjälpa till med detta.

Mättnadsskala

Denna skala är på samma sida som blandningsguiden, eftersom de två funktionerna fungerar i tandem.

Mättnadsskalan är en gradering av gråtoner från svart till vitt. Från de grå cellerna med varierande ljusstyrka som presenteras på skalan kan du alltid hitta grå nyans så nära som möjligt i mättnad till den önskade nyansen, varefter det kommer att bli klart hur mycket färgen behöver mörkas eller ljusnas.

För att förstå hur detta görs praktiskt, titta på den här videon:

Färgkombinationsscheman

Skivans baksida innehåller inte mindre användbar information, och kanske ännu mer - det hjälper att välja färgkombinationer baserat på det valda schemat.

Ett färgkombinationsschema är en figur, i det enklaste fallet en linje som förbinder färger som "matchar" varandra. Formuleringen är mycket vag, eftersom valet av den kromatiska skalan är både en vetenskap och en konst.

För det första är harmoni eller disharmoni av färger ett mycket subjektivt begrepp. Som de säger, "det finns ingen vän enligt smak."

För det andra, om de är "lämpliga" eller "olämpliga" - allt beror på den specifika situationen, humöret, vad exakt konstnären eller designern vill säga, på stilen i vilken den utförs detta arbete, oavsett om du behöver markera något element eller vice versa - gör det osynligt.

Färghjulet är ett verktyg där du visuellt kan visa alla huvudfärgscheman, men du måste veta hur du använder det här verktyget. Du bör veta själv, eller åtminstone känna vilket av systemen som passar bäst för din uppgift. För vår del kommer vi att försöka lägga ut så mycket användbar information som möjligt på denna sida om hur man använder färghjulet (se avsnittet