Tjenare alla läsare!

Många av er har säkert blivit förbryllade av hur de hexadecimala färgkoderna inom webbutveckling fungerar och det tänkte jag förklara i detta inlägget.

Hexadecimala färger är egentligen ganska enkla när man väl förstått grundkoncepten som bygger upp dem. Ett av dessa grundkonceptet är att de hexadecimala färgerna bygger på färgprincipen RGB vilket innebär att man anger ett typ av ”del-värde” som kan liknas vid en procentuell intensitet för varje färgpott som är R = Röd, G = Grön, och B för Blå.

Mer i detalj så står ”hexa” för ett talsystem där basen är 16 och eftersom vi kan ange varje s.k. ”färgpott” med 2 bitar så (se #RRGGBB <- två färgvärde för var färgpott) innebär detta att vi använder oss av ett fullt färgpotts-värde på 16^2 (256), och eftersom man i datatekniken alltid räknar man 0:an såvida inget annat specificerats så kommer vi att kunna ange värden från 0-255 – då detta inkluderar nollan och resulterar i 256 värden.

Så nu när vi har det konceptet klart för oss är det dags att gå vidare.

Alla möjliga hexadecimala färgpotts-värden presenterade

Varje färgpott består alltså av 2 bitar i hexadecimala värden/2 hexadecimala värden, och då bör vi kolla på hur hexadecimala värden av olika typer skrivs och vad dessa representationer motsvarar och innebär, se nedan:

Hexadecimala värde		Decimala värde
1	=	1
2	=	2
3	=	3
4	=	4
5	=	5
6	=	6
7	=	7
8	=	8
9	=	9

Sen kommer vi till den intressanta delen – eftersom vi bara kan representera värden med ett värde/1 bit, så kommer talet och värdet 10 att orsaka problem för oss, då detta i det decimala talsystemet tar upp 2 värden/2 tal/2 bitar. Som det då funkar i hexadecimalt då vi måste fortsätta upp till 16 värden per bit/per värde, så kommer talen från 10-15 att representeras av bokstäver istället! (Notera att jag säger upp till 15 som maxvärde då man alltid räknar med nollan! kan ses ovan) Se nedan lista av resterande hexadecimala värde från 10 upp till och med 15:

Hexadecimala värde		Decimala värde
A	=	10
B	=	11
C	=	12
D	=	13
E	=	14
F	=	15

Som ni nu säkert kan förstå om ni experimenterat lite själv med hexadecimala färger så kan ni se att bokstaven F är samma sak som ”fullvärde” – det högsta värdet varje bit kan ha i en färgpott, har vi då 2 st. F så borde detta då alltså innebära absolut fullt värde för hela färgpotten (alltså 255 i decimala talsystemet då vi hade 16^2 för våra 2 värden/bitar med vardera hexadecimalt tal). Och då förstår ni säkert också att 2 st. 0:or motsvarar en ”tom” färgpott som då borde leda till ”avsaknad av färg för den färgpotten”.

Bra liknelser för att hjälpa med förståelsen hämtat från fysiken och vardagen

Ljus i fysiken hjälper förståelse för vit färg i webbutveckling

En grymt bra liknelse från fysiken som förklarar väldigt bra hur RGB fungerar, är liknelsen av hur Ljus är uppbyggt och hänger ihop om man studerar det närmare.

Ett bra praktiskt exempel som visar på liknelsen är när man tar den ”vita” färgen från vilken lampa som helst, och belyser denne genom ett spektrum, så kommer man kunna se på andra sidan av spektrumet hur ljuset har delats upp i dess olika våglängder. Vilket klockrent visar hur alla färgerna (i webbdev sammanhang färgpotterna) bidrar till att skapa vitt ljus (vit färg i webbdev sammanhang).

För webbutveckling innebär ju detta då att fulla färgpotterna för alla färgpotter som finns – Röd, grön såväl som blå, krävs för att skapa vit färg – t ex. om man vill ha vit textfärg blir hexadecimala färgkoden: #FFFFFF.

Svarta kläder’s ljusabsorption – vardagsexempel som hjälper förklaring av svart färg i webbutveckling

På samma fysiklektion som jag fick ovan förståelse för det vita ljuset, så nämnde även vår fysiklärare att det vi upplever som ”svart färg” egentligen är avsaknad av färg, och att detta är orsaken till att svarta kläder blir varma på sommaren när solen är framme – då den svarta färgen egentligen är avsaknad av färg/våglängder (för ljus), så absorberar denne alla färger (våglängder) som solen förser den med för att försöka kompensera för dess avsaknad av färg. Vilket bildar värme då solens energi är just det: energi. Detta är också varför man är som svalast i vita kläder på sommaren, då dessa redan innehåller fulla spektrumet av färger så stöter den vita färgen bort alla våglängder istället för den är redan ”mättad” (skulle man kunna säga) av våglängder.

Sammanfattat så kan man se att vit färg reflekterar/stöter bort allt ljus, då det redan är mättat, och tar därmed inte heller upp någon värmeenergi i solen. Medan det svarta tyget saknar färg och därför gärna suger åt sig solljusets våglängder och därmed absorberar värmeenergi.

Ett annat exempel är att ni säkert också vet att avsaknaden av ljus resulterar i mörker, med andra ord svarthet/svart färg.

Primära färgerna i hexadecimala färgkoder

När det gäller våra primära färger Rött, Grönt och Blått som RGB metoden representerar så kan vi då säkert också förstå att #FF0000 resulterar i en Röd färg då vi fyller Enbart* den röda färgpotten. Medan istället #00FF00 resulterar i en Grön färg då vi fyller den färgpotten till fullo och slutligen borde ju då #0000FF ge oss en Blå färg då denna färgpott är fylld till fullo.

Alternativa färggivningsmetoder i webbutveckling

Det var ju ganska enkelt, dock så blir det lite mer komplicerat när vi ska försöka skapa t ex. ”hälften så full färgpott” i hexadecimala tal, etc. då man måste räkna på detta – såvida man inte använder den lite mer raka formen för färggivning i CSS: rgb(0,0,0) eller rgba(0,0,0,0);

rgb(0,0,0) är en färggivningsmetod i CSS som låter dig ange de decimala talen för färgpotterna istället för hexadecimalt – alltså från 0-255 färgvärde för varje färgpott.

rgba(0,0,0,0) är en annan färggivningsmetod i CSS som låter dig ange även en alpha-kanal för transparens/genomskinlighet.

Förstå hur ”fulla” respektive färgpotter som utgör en färg, verkligen är genom hexdec-dec värdes-konvertering

Sådär ja, då vet vi vad alla möjliga bokstavs- och sifferkombinationer motsvarar, vi har även lite ”lättsmälta” liknelser för att komma ihåg hur och varför svart, vitt såväl som de primära (röd,grön,blå) färgerna skapas/genereras/byggs upp. Men vi vet fortfarande inte vad dessa betyder i vårt vardagliga (vanliga) räknesystem (decimala talsystemet – 10 som bas), det ska vi gå igenom härnäst.

Börja smått – dela upp hexadecimala färgkoden i dess 3 beståndsdelar Röd-färgpott, Grön-färgpott och Blå-färgpott

För detta exemplets skull ska vi använda oss utav färgkoden #2D9FF0 (notera att hexadecimala färgkoder kan skrivas både med stora såväl som små bokstäver (versaler/gemener) väl i koden – själv föredrar jag att skriva med små bokstäver, men valt att skriva med stora bokstäver för tydlighetens skull i detta inlägget).

Om vi ska dela upp #2D9FF0 i dess tre beståndsdelar får vi som följer:

2D = Röd färgpott
9F = Grön färgpott
F0 = Blå färgpott

Nästa steg – räkna ut färgpotterna var för sig från hexadecimalt till decimala värden

Vi börjar med den första färgpotten (röd):
2 är första biten i färgpotten, och D är den andra och sista biten i färgpotten.

Den första biten (längst till vänster) i en färgpott multipliceras med 16 när man ska räkna ut det decimala värdet, och då kanske ni undrar varför detta är? Se bild nedan som visar varför:

Som ni då kan se ovan så är hexadecimal -> decimal värdes-konvertering ganska straight-forward 🙂

Talsystem förklarat ytterligare för ökad förståelse

Undrar ni nu fortfarande kanske varför den ena fick 16^1 medan den andra fick 16^0, så är det som så för alla talsystem (även vårt egna decimala) att basen i talsystemet – hexadecimalt = basen 16, decimala = basen 10, binära = basen 2, oktala = basen 8, osv.  – upphöjs med ett steg för varje bit som representerar vårt tal från vänster till höger.

Detta kan vi visa med ett enkelt binärt exempel  (då detta är lätt att räkna med) på 4 bitar som ser ut som följer:
0    0    0    0 <- Där värdena för vardera bit är som följer:
2³ 2²   2¹   2⁰

Som då motsvarar från vänster: 8   4   2   1    <- uträknat.

I det decimala så fick vi i grundskolan lära oss att första talet längst till höger var s.k. ”ental” men de gav oss aldrig den bakomliggande (lite mer avancerade) matematiska anledningen – detta var helt enkelt för att vårt talsystem har basen 10 och talet längst till höger alltid får upphöjt med 0, medan efterföljande tal åt vänster ökas exponenten med 1 alltså blir nästa tal 10⁰⁺¹

osv. 🙂

Visst är matematik roligt när man väl förstår det och får förklaringar bakom saker man använt hela sitt liv utan att ha en ”riktig” vetenskaplig bakomliggande förklaring för varför det var så? 😛

Hursomhelst, nu borde ni förstå hexadecimala färgvärden bättre, testa gärna själva och återkom gärna om ni skulle ha frågor.

Hexadecimal kortform förklarad

Men innan detta inlägget är över ska jag också bara som hastigast nämna att hexadecimala färgkoder kan skrivas på en s.k. ”kortform” där man bara använder 1 bit per färgpott istället för 2, detta går dock Endast* att göra om båda färgpottens värden är Identiska* t ex:
Har vi den full-röda färgen: #FF0000 <- så är färgpottens värden identiska och kan därför även skrivas som #F00 <- som ni säkert noterar är även Gröna och Blåa färgpotternas värden identiska* och kan även dessa därför förminskas/förkortas till 1 bits hexadecimalt färgvärde 😉 Som jag gjorde direkt i ovan exempel.

Såja, då tror jag att jag var klar 🙂 Hoppas ni fick bättre förståelse för hur saker och ting ligger till och fungerar, samt varför.

Enjoy, hoppas ni har nytta av kunskapen ni nyss fått 😉

Until next time 🙂