Den ultimata guiden för hexfärger

 In Bästa praxis

946201038, xxmmxx

Hexadecimala färger är webbens visuella språk. När du vill att en webbsida (eller webbapp) ska visa en viss färg, så använder du hexkoden.

Vad är en hexfärgkod?

Hand eyedropper tool with color palette stock illustration

1215017532,VladSt

En hexfärgkod är en 6-symbolskod bestående av upp till tre element med två symboler. Var och en av 2-symbolelementen uttrycker ett färgvärde från 0 till 255.

  • Element 1: Rött värde
  • Element 2: Grönt värde
  • Element 3: Blått värde

Koden skrivs med en formel som gör om varje värde till en unik tvåsiffrig alfanumerisk kod. Till exempel är RGB-koden (224, 105, 16) E06910 i hexadecimal kod.

Varför? Det är komplicerat och har att göra med basnummersystemet 16. Om du är nyfiken hittar du en bra förklaring här. Om du bara undrar vad det här betyder för dig som designer, så finns det ett par viktiga saker du behöver veta:

  • Med hjälp av hexadecimala koder kan du visa mer än 16 miljoner unika färger, vilket antas vara mer än det mänskliga ögat kan uppfatta.
  • Du kan använda färgplockare eller omvandlare för att skapa koden åt dig.

Varför använda hexkod istället för siffror? Därför att om du använder siffror kan varje rött, grönt eller blått värde från 0 till 255 vara en, två eller tre möjliga siffror. Totalt kan koden bestå av så få som tre siffror eller så många som nio. Detta kan orsaka förvirring hos systemen som läser koderna, men särskilt bland dem som gör själva kodningen. Genom att varje värde består av sex symboler oavsett vad, minskar risken för fel.

Vad är hexfärgkoder?

Color wheel with graduation from white to black stock illustration

525330557, Thoth_Adan

Hexfärgkoder är värden som visar hur mycket färg som ska visas på bildskärmen. Värdena är en speciell kod som representerar färgvärden från 0 till 255.

Om rött, grönt och blått är på lägst 0 (representerat som ”00” i koden) är färgen som uttrycks svart. Om rött, grönt och blått är högst 255 (representerat som ”ff” i koden) är färgen som uttrycks vit.

Hexfärgvärdena kan kombineras för att visa mer än 16 miljoner olika färger. Så naturligtvis kommer de flesta att hamna någonstans mitt emellan. Du kan alltid använda en omvandlare för att konvertera RGB-värdena till hexkod åt dig.

Det kan dock vara till hjälp att memorera några av de vanligaste hexadecimala färgerna. Detta kan vara till nytta speciellt om du snabbdesignar tillsammans med en kodare.

Populära hexfärgkoder

Färg RGB Hexfärgkod
Svart (0, 0, 0) #000000
Blå (0, 0, 255) #0000FF
Grå (128, 128, 128) #808080
Grön (0, 128, 0) #008000
Lila (128, 0, 128) #800080
Röd (255, 0, 0) #FF0000
Vit (255, 255, 255) #FFFFFF

Unika hexfärgkoder

Färg RGB Hexfärgkod Användning
AliceBlue (240, 248, 255) #F0F8FF Subtil bakgrund för en företags- eller e-handelssida
Korall (255, 127, 80) #FF7F50 Lugn accentfärg
Mörkt tegelröd (178, 34, 34) #B22222 Aggressiv accentfärg
Skrikrosa (255, 105, 180) #FF69B4 Lekfull accentfärg
LemonChiffong (255, 250, 205) #FFFACD Romantisk bakgrund för ett bröllop eller annan personlig sida

Hur fungerar hexfärger?

Digital eye with colorful wave lines stock photo

1226241649, Selman Keles

Hexfärger är baserade på färgmodellen RGB som har använts sedan fotograferingens barndom.

Teorin bakom modellen är att du praktiskt taget kan skapa vilken färg som helst som ögat kan se genom att tilldela dem olika kombinationer av röda, gröna och blå färgvärden. RGB-färgmodellen används i princip av alla datorer och mobilskärmar som finns, men även av tv-apparater, digitalkameror och videoprojektorer.

På webben och i de flesta digitala applikationer används en skala mellan 0 och 255 färgvärden. Du (eller en programmerare) anger hur mycket rött, blått och grönt som skärmen ska visa. Den kombinationen skapar i sin tur den färg som tittaren ser.

Du har stor frihet att välja vilken färg du vill ha. Det maximala antalet kombinationer är 16 777 216 vilket är mer än det mänskliga ögat faktiskt kan urskilja.

Vad är skillnaden mellan att använda RGB- eller hexkoder?

RGB font styles design templates stock illustration

1221544644, devastudios

Hexfärgkoder föredras av programmerare eftersom de är förutsägbara. De är alltid sex siffror oavsett färg. RGB-värden kan vara så få som tre siffror och så många som nio.

Du behöver inte använda hexkoder i webbdesign. Om du kodar en sida i HTML kan du även använda RGB-värden eller till och med färgnamn.

Så här skulle HTML-koden se ut om du till exempel kodar en akvamarinbakgrund för en webbsida.

  • Hexfärgkod för akvamarin: <div style=”background-color:#7FFFD4″></div>
  • RGB-färgkod för akvamarin: <div style=”background-color:rgb(127, 255, 212)”></div>
  • Färgnamnkod för akvamarin: <div style=”background-color:aquamarine”></div>

Även om du kan ange namnet eller RGB-koden betyder det inte att du borde. För att minska risken för misstag i ett projekt, använd en färghjulsplockare för hexfärger eller omvandlare för att skapa den hexkod du vill ha. På så sätt är det mindre risk att en nuvarande eller framtida kodare försöker göra konverteringen själv och förvandla din underbara webbsida till något du inte hade tänkt dig.

Arbeta med hexfärger

Web design concept vector illustration of person sitting at a desk working

1203440092, Designer

Om du är van att arbeta med färger i Adobe Illustrator eller för tryck är det lite av en anpassning att arbeta med hexfärger på webben. Här är ett par saker som är bra att känna till för att ditt projekt ska bli lyckat.

Akta dig för färgbandning

Med 16 777 216 potentiella färger ger hexfärgkoder dig ett oändligt antal alternativ för kontrasterande färger. Men eftersom varje bildpunkt måste visa en unik färg, så är hexfärger inte speciellt bra för att blanda nyanser mellan olika färger.

När webbdesigners försöker skapa gradienter med hexfärger blir resultatet inte alltid som förväntat. Eftersom nyanserna inte blandas blir det tydliga färgband på skärmen (färgbandning).

Det är större risk att färgbandning uppstår på äldre enheter som inte kan visa miljontals färger. Med dagens CSS kan du programmera gradienter för att eliminera problemet med färgbandning. På moderna skärmar är färgbandning vanligast på foton som har naturliga gradienter till exempel himlar och regnbågar. I dessa fall har de miljontals färger som kan ses med blotta ögat komprimerats för att spara filutrymme.

Spara tid med palettresurser för hexfärger.

När du snabbt vill utveckla ett unikt utseende kan det kännas överväldigande att välja kompletterande färger bland de 16 miljoner som finns tillgängliga. Som tur är har andra designer redan gjort en del av arbetet åt dig genom att skapa palettdatabaser med hexfärger och interaktiva väljare.

Color-Hex färgpaletter: Bläddra och sök igenom tusentals communityskapade hexfärgkombinationer bland Color-Hex färgpaletter.

Sökning? Gå igenom de namngivna paletterna sida för sida. Varje palett har ett namn som ger dig en känsla för dess stil och identifierar alla sex hexfärgerna. Klicka på designerns namn för att se andra färgpaletter som hen har gjort.

Color-Hex färgpaletter är en fantastisk resurs för inspiration när det gäller hexfärger.

Coolors: Hexfärgresursen Coolors kombinerar inspiration med funktionalitet för att påskynda designprocessen.

Du kan söka igenom trendiga färgpaletter för att se vad som har fångat uppmärksamheten hos andra designer. Varje trendig palett kan sparas i en personlig ”favoritlåda” om du anmäler dig för ett konto.

Eller använd deras blixtsnabba palettgenerator för att skapa paletter baserat på de färger du vill använda. En tidsbesparande funktion hos Coolors är möjligheten att ”låsa” en färg (eller färger) och sedan generera ytterligare kompletterande färger med ett enkelt tryck på mellanslagstangenten. Nya färger och nyanser flyger förbi i nästintill warphastighet. Det är bara att vänta tills den rätta dyker upp.

Coolors finns också som en iOS-app eller ett Adobe-tillägg.

Matcha hexfärger med andra designelement

Om du designar för en befintlig webbplats eller har andra element som du vill matcha måste du veta vilka hexfärger du arbetar med på webbplatsen. Det är här som en bra färgväljare är ovärderlig. Med ImageColorPicker, kan du överföra vilken bild som helst och se vilka hexfärger som är representerade.

En annan bra resurs är ColorPick Eyedropper, ett tillägg till webbläsaren Google Chrome som låter dig se hexfärgen för en webbsidas alla olika delar. Om du upptäcker att du tycker om en färg på en viss webbplats, använd Eyedropper för att se vilken det är.

Om du väljer bilder och andra element för webbplatsen behöver du ett enkelt sätt att identifiera filer som matchar din hexfärgpalett. På iStock kan du lägga till en hexfärg som ett filter till vilken sökning som helst. Ange koden eller välj bland deras färgväljare och skriv sedan in dina sökord. Webbplatsen returnerar relaterade bilder som matchar färgen du angav.

Är du redo att börja hitta de perfekta bilderna för ditt hexfärgschema? Gå hit för att hitta filerna som kommer att komplettera ditt projekt.

Var artikeln användbar?
Dela denna artikel
Få de senaste tipsen från iStock
Mer resurser för dig