Lite om färger, RGB & HSV

Så, vad sjutton har detta med elektronik att göra? En hel del om man labbar med t.ex. RGB -lysdioder eller snickrar ihop en ljusstake med rgb-lysdioder eller en styrning av DMX -lampor. Pyttelite insikt i hur det fungerar kan vara avgörande för att ideer ska lyfta och få vingar.

RGB, Rött, Grönt Blått

Genom att blanda rätt mängder av rött, blått och grönt så kan vi få fram de flesta synliga färger. Detta är ett additativt färgsystem. Det betyder att vi har 3 stycken lampor som emitterar en färg. När 2 eller 3 färger blandas adderas våglängderna vilket innebär att vi får en ny färg, som också blir ljusare. Om vi adderar full effekt av rött, grönt och blått så får vi vitt ljus.



Om vi printar på papper, så använder vi istället en subtraktiv färgmodell t.ex. CMYK - Cyan, Magenta, Gul och Svart. Det som händer i en subtraktiv färgmodell är att ljus studsar mot ett papper och in i våra ögon, alla ljusvåglängder från ljuskällan studsar mot pappret utom de som absorberas av färgen på pappret. Färgen på pappret tar alltså bort våglängder från ljuskällan och det vi upplever i våra ögon är de våglängder som blir kvar. Prova blanda många vattenfärger. Reslutat blir svart. Dvs raka motsatsen vad det blir i ett additativt färgsystem där du får vitt om du blandar alla ljuskällor.

Tillbaka till RGB. Man kan exprimentera lite och blanda dessa 3 färger för att se vad som händer. Tyvär är datamonitorn 2-dimensionell så vi får fixera den 3:e färgen till någonting och blanda de två andra färgerna. Resultatet blir som till vänster här.



Måla Rött-grönt B=0 B=100 B=250
Måla Rött-blått G=0 G=100 G=250
Måla Blått-grönt R=0 R=100 R=250

RGB är det system som en tv-apparat eller datamonitor använder för varje pixel på skärmen.

Färgstyrkan anges typiskt som ett värde 0-255. Dvs (R,G,B) = (0,0,0) betyder då att alla lampor är släckta och (R,G,B) = (255,255,255) betyder att alla är tända, vilket ger vitt ljus. (R,G,B) = (255,0,0) blir då rött.


På detta vis fungerar det med RGB-lysdioder. Vi blandar en viss mängd av rött, grönt och blått och får då en önskvärd färg.

Färgen anges ofta i värdet av en byte. Dvs, som ett värde 0-255 där 255 är full styrka och 0 är inget alls. Det betyder att rgb(255, 255, 255) är vitt och rgb(255, 0, 0) är rött.

Okej, så detta med att välja färg handlar alltså om att skruva på tre stycken rattar för rött, grönt och blått. Vill man programmera en grej som ger random färg så blir det något i stil med:

rgb(random(255), random(255), random(255))

Fint. Men vill man jobba så? Poängen med att ljussätta något med färger är oftast att det skall se trevligt ut, snarare än hysteriskt. Om jag skruvar upp en färg, då förändras dessutom både ljusintensiteten och mättnaden, så jag måste skruva ner de två andra färgerna. Vad man önskar är snarare: Man vill välja en färg genom att skruva på 1 (singular) ratt märkt "färg" - inte kalibrera 3 rattar.

HSV, Hue, Saturation, Value

Här kommer HSV in i bilden. Hela iden med denna websida är att lobba för att din programkod i framtiden skall innehålla några få rader som låter dig ange färgen i termer av H, S och V snarare än R, G och B. So to speak.

Hue, Saturation, Value översätts t.ex. med kulörton/nyans/färg, mättnad, ljusintensitet.



Måla med S=1.0 S=0.5 S=0.1
(det tar några sekunder innan färgerna räknats om)

Mättnad är hur långt ifrån origo (mitten) på cirkeln man är. Maximal mättnad, där färgen är som starkast, är längst ut på cirkeln. Intensitet är hur långt ifrån svart färgen är. Det syns inte i denna cirkel, eftersom cirkeln egentligen är en cylinder och intensiteten är då höjden på cylindern. Ibland brukar cylindern visas som en kon. Man kan rita det lite som man vill, det viktiga är att man kan fixera intensitet och mättnad och sedan välja en färg.



Poängen med denna modell är att vi kan hålla ljusintensiteten och mättnaden konstant och enbart ändra själva färgen. Detta är optimalt om vi t.ex. med RGB -ljusdioder vill skapa en fin regnbåge.


Vi får alltså en ratt där vi kan välja färg och de 2 andra rattarna kan man låta bli. Vi kan behålla kontant ljus och enbart ändra färg. Ratten vi kan välja färg på är lätt kontrollerad i vårt program. Vi kan t.ex. lätt få en färg att glida mellan olika färger. Vi kan enkelt måla upp en regnbåge och vi kan enkelt framställa delar av en regnbåge eller färggradienter. Det blir helt enkelt väldigt enkelt och inte bara få lampan eller lysdioderna att fungera - det går att göra vackert också!

Kulörtoner

Den lilla koden som gör jobbet

Är nedan lilla snutt som konverterar från HSV till RGB. RGB används sedan på vanligt sätt. Genom att använda denna metod kan sedan all ljusdata bestämmas med HSV istället.

Vi kan alltså sätta s och v till lämpliga värden och sedan loopar vi igenom för alla h mellan 0 och 1, t.ex. med 0.001 -steg. Det blir en enkel loop för alla h mellan 0 och 1 och ut får vi RGB som tjusigt vandrar mellan regnbågens alla färger.


(från exemplet med denna RGB till HSV -konvertering för en REB-led)

Det är ett exempel på nyttan med denna färgmodell, dvs helt enkelt att vi kan utgå ifrån nyans, mättnad och intensitet i vår algoritm snarare än röd, grön och blå.

int * HSVtoRGB(float h, float s, float v) 
{
    static int vr[3];
    int i;
    float r,g,b,f,p,q,t;
    i=(int)(h*6);
    f=h*6-(float)i;
    p=v*(1-s);
    q=v*(1-f*s);
    t=v*(1-(1-f)*s);
    switch (i%6) 
    {
        case 0: r=v, g=t, b=p; break;
        case 1: r=q, g=v, b=p; break;
        case 2: r=p, g=v, b=t; break;
        case 3: r=p, g=q, b=v; break;
        case 4: r=t, g=p, b=v; break;
        case 5: r=v, g=p, b=q; break;
    }
    vr[0]=(int)(r*255);
    vr[1]=(int)(g*255);
    vr[2]=(int)(b*255);    
    return vr;
}

// 
// hue 0-1
// sat 0-1
// val 0-1
//
int *v;
v = HSVtoRGB(hue, sat, val);

int red = v[0];
int green = v[1];
int blue = v[2];

Exempel:
Styra DMX -spotligts
Ljusstake med RGB-lysdioder
Styra en RGB-led

Lycka till !

Ovan bild Isaac Newtons färgcirkel, från Optics 1704, som visar färgerna associerade med musikaliska noter. Färgerna från röd till violett delas av noterna med start och avslut från D , dvs en full skala.