Färggranna tal

I blogginlägget Tal i datorernas värld beskrev jag hur binära tal rinner i ådrorna på våra datorer och mobiltelefoner. Men det finns faktiskt en annan sorts tal som gör din digitala vardag möjlig – de hexadecimala. Som en sorts kusin till de binära talen sätter de hexadecimala talen färg på bilder, tv-spel och webbsidor – ja, precis allt du ser på din skärm.

Skärmskola

Det du ser på din skärm förefaller vara en sammanhängande enhet. I själva verket är skärmen på din dator, surfplatta och mobil indelad i små, små kvadratiska rutor – pixlar. Varje pixel antar en egen färg och skapar, som ett pussel, de former du ser.  

Att moderna datorer kan återge bilder är ganska imponerande när man betänker att datorn i begynnelsen var en ren räknemaskin, vars enda talang var att utföra räkneoperationer på binära tal. Steget till dagens datorer – som kan streama filmer, utföra ordbehandling och bildredigering – är långt. Men i grunden bygger de på samma idé. Nyckeln är att hitta ett sätt att översätta allt man vill att datorn ska behandla eller kommunicera, till tal.

Din skärms miljoner pixlar, som var och en har en bestämd position och en ständigt föränderlig färg, måste alltså på något sätt konverteras till siffror. Det första steget är att beskriva varje pixels läge på skärmen med hjälp av två koordinater: en x-koordinat som anger pixelns läge i sidled och en y-koordinat som anger dess läge i höjdled. Det andra steget är att översätta pixelns färg till tal. Men hur gör man det? 

RGB-kodning

Om man blandar de tre primärfärgerna rött, grönt och blått i rätt proportioner kan man – överraskande nog – skapa alla möjliga färger. Genom att ange mängden av var och en av dessa tre färger som tal, kan den resulterande färgen sammanfattas i en taltrippel (r, g, b), där r står för rött, g för grönt och b för blått.

Varje tal r, g och b i taltrippeln ligger mellan 0 och 255. Taltrippeln (255, 0, 0) kodar alltså för en färg som innehåller full intensitet av färgen röd, men inget blått eller grönt, medan taltrippeln (0, 255, 0) kodar för en färg som inte innehåller något rött eller blått, men däremot maximal grad av grönt. På samma sätt är (0, 0, 255) en kod för klarblått. Det här färgkodningssystemet kallas RGB och kan koda mer än 16 miljoner olika färger – fler än de flesta människor kan uppfatta.

(r, g, b) = (255, 0, 0)

(r, g, b) = (0, 255, 0)

(r, g, b) = (0, 0, 255)

I applikationen här nedanför kan du dra i reglagen och se hur färger, och motsvarande taltripplar, förändras. Börja med att klicka på den färgade rutan.

Hexadecimala tal 

Till varje pixel på din skärm associerar datorn alltså fem tal: två koordinater, som beskriver dess läge, samt ett tal för var och en av primärfärgerna rött, grönt och blått. Det är här de hexadecimala talen gör entré. I programmeringssammanhang skrivs nämligen talen i RGB-systemet ofta i hexadecimal form. Vad innebär det?

När vi läser ett tal som 213 vet vi att vi ska tolka det som 2 hundratal, 1 tiotal och 3 ental. Det är siffrans position i talet som leder oss att tolka den som hundratal, tiotal eller ental.

Eftersom varje platsvärde i vårt talsystem är en tiopotens, säger man att vårt talsystem har basen 10. I det hexadecimala talsystemet är varje siffras platsvärde i stället ett tal med basen 16.

Talet 213 i det hexadecimala talsystemet står alltså för 2 tvåhundrafemtiosex-tal, 1 sextontal och 3 ental, vilket i vårt vanliga talsystem motsvarar talet 531 (2 · 256 + 1 ·16 + 3 · 1). 

I det hexadecimala talsystemet behövs sexton symboler för att beteckna entalen 0–15. Som du ser i tabellen här nedanför har man valt att låta några av dem vara bokstäver.

Den här egenheten hos det hexadecimala systemet gör att vissa tal skrivs helt med bokstäver. Talet 191 i vårt decimala talsystem motsvaras till exempel av talet BF i det hexadecimala, eftersom 191 = 11 sextontal + 15 ental.

På den här sidan kan du leka med att växla mellan tal i decimal- och hexadecimal form.

Varför hexadecimala tal?

Med tanke på all skoltid du har ägnat åt att bekanta dig med det decimala talsystemet, är det inte konstigt om det hexadecimala talsystemet känns främmande. För att förstå resten av den här texten räcker det dock att du har greppat huvudidén: att det finns ett sätt att skriva alla möjliga tal med siffrorna 0–9 och bokstäverna A-F.

Så låt oss återgå till färgerna. Som jag nämnde skrivs de tre talen i RGB-systemet ofta i hexadecimal form. Taltrippeln (141, 66, 245) ges till exempel av hex-koden 8D42F5. Testa själv! Skriver du in #8D42F5 i valfri sökmotor kan du vänta dig den här lila färgen som första sökresultat.

(r, g, b) = (141, 66, 245) = 8D42F5

Men varför använder man hexadecimala tal i RGB-systemet? Jo, för att datorn ska kunna tolka våra färgranna taltripplar (r, g, b) måste talen skrivas i binär form. Eftersom varje tal r, g och b kan vara högst 255 kommer varje sådant tal att kräva som mest 8 binära siffror, eller bits (binary digits). Den granna lila färgen här ovanför skrivs till exempel: 

Koden med ettor och nollor är klar som korvspad för en dator, men inte så lätt för en människa att tugga i sig. Det är här de hexadecimala talen gör entré. Det är nämligen väldigt lätt att översätta binära tal till hexadecimala. Varje sjok av (högst) fyra ettor och nollor, motsvarar nämligen en siffra i det hexadecimala systemet. På så sätt kan varje färgglad taltrippel reduceras från (högst) 24 binära siffror, till bara 6 hexadecimala, vilket gör färgerna lättare för en människa att både skriva och komma ihåg.

De hexadecimala talen är alltså en slags kortform för binära tal, som blir en kompromiss mellan läsbarhet för en människa och läsbarhet för en dator. Det är därför de hexadecimala talen är populära i programmeringssammanhang – inte minst för att beskriva alla regnbågens färger på din skärm.

Referenser och vidare läsning

Hadhazy, Adam (2015) What are the limits of human vision? BBC https://www.bbc.com/future/article/20150727-what-are-the-limits-of-human-vision

IT-läraren, Talsystem Del 2, http://itlararen.se/labbar/doc-Talsystem-Hexadecimala_Tal_med_%C3%B6vningar.pdf

Pluralsight (2015) How to read hex color codes. https://www.pluralsight.com/blog/tutorials/understanding-hexadecimal-colors-simple 

Savas, Niko (2016) Why do we use hexadecimal? https://medium.com/@savas/why-do-we-use-hexadecimal-d6d80b56f026