Å publisere noe på nett og det å publisere en trykksak er to vidt forskjellige ting. En som ellers steller med design, typografi, kunst og grafikk på tradisjonell måte, kan ikke uten videre ta med seg sine teknikker til et webmiljø.
Webmiljøet er i stor grad brukerbestemt. Den enkelte leser har i stor grad selv mulighet til - om han vil, gidder og kan - å tilpasse stoffet etter eget ønske. Dessuten er det så mye forskjellig utstyr som brukes til nettlesing i dag, at en webdesigner rett og slett ikke kan være egenrådig, om han ikke vil utsette store deler av sitt nedslagsfelt for ubehagelige overraskelser.
Men en farge er da en farge? Nei, det er nettopp det den ikke er. Den påvirkes av miljøet rundt den, og ikke minst: i skjermsammenheng av monitorens kvalitet, type og kalibrering. Sett vilkårlige maskiner med plasma, LCD og katodeskjerm ved siden av hverandre sammen med en tablet-PC, en nettkoblet spillkonsoll, en iPhone og en Nokia. Kall opp khawaga.com - og ingen av de vil være like. Kall opp andre sider, og det samme skjer. Noen sider vil være meget annerledes, noen ubehagelige å lese, i verste fall tilnærmet uleselige. Dette siste kommer av liten forståelse for kontrast og fargebalanse.
Den sveitsiske kunstmaler og formgiver Johannes Itten (1888-1968) eksperimenterte med geometrisk uttrykk, fargesammensetninger og lysvirkninger. Han satte fargenes innbyrdes kjemi i system, og lanserte de 7 kontrastvirkninger. Nærmere bestemt fargens egenkontrast, kontrasten mellom lys og mørke, kontrasten mellom kald og varm, komplementærkontrasten, simultankontrasten, kvalitetskontrasten og kvantitetskontrasten. Disse er godt beskrevet her.
Hans fargelære er fremdeles i bruk ved de fleste maleskoler, kunstakademier og designanstalter. Hans fargesirkel, som springer ut fra Isaac Newtons idé om "the hue circle" fra 1707, er basert på primærfargene rød, gul og blå og ligger som vignettbilde på denne siden. Legg markøren over bildet, og sammenlign med fargesirkelen tilpasset de såkalte "browsersikre" fargene.
Selv på slutten av Ittens virkedager, var fargemonitoren bare i støpeskjeen. Han arbeidet med tradisjonell subtraktiv fargeblanding, mens skjermer benytter det motsatte. Resultatet kan aldri bli det samme; skjermen har en luminens som gjør fargene klarere. Men hans teorier er fremdeles gyldige, om virkemidlene er annerledes. For spesielt interesserte, finnes en særdeles utførlig avhandling om fargekjemi her. IQ<100 warning ! Jeg har ikke orket å lese gjennom alt dette selv ...
Subtraktiv
Additiv
Fra naturens side er ikke primærfargene rød, gul og blå, men rød, grønn og blå. Øynene er bare følsomme for RGB. Siden vi likevel oppfatter hele spekteret, betyr det at alle farger bygges opp av rødt, grønt og blått. Bruk en lupe på en fargemonitor, og du ser mer eller mindre lysende røde, grønne og blå punkter. I et hvitt felt lyser alle punkter sterkt, i et svart felt lyser ingen og i en mellomfarge lyser punktene i større eller mindre grad. Systematikken fremgår av figuren til venstre.
Det motsatte er hva vi til daglig opplever i form av trykk, som krever hvit bakgrunn: det at alle solens stråler reflekteres. Her må det trekkes fra stråler med forskjellig frekvens, for at farger skal fremstå. En formgiver kan fritt blande forskjellige pigmenter for å oppnå denne filtreringen, mens en reprotekniker og trykker må skille dette ut i punkter for å gjengi det. Grunnfargene er her Cyan(blå), Magenta(rød) og Yellow(gul). Siden C og M er sekundære farger, vil man ikke få sort ved blanding: derfor legges det til en "nøkkelfarge" Key(sort) for kontrastenes skyld. For å se fargene må bildet belyses: fra bildet reflekteres rødt, grønt, blått og blandinger av dem - enkelt illustrert i figuren til høyre. I vignettbildet er fargene i sirkelen gjengitt tilnærmet "CMYK". Legg markøren over sirkelen for å se de rene RGB-fargene. Trykte farger kan aldri bli så "rene" og klare som RGB.
I eldre nettalder og langt opp i den yngre, var både maskinvare og programvare begrenset hva farger angår. 8-bit var oftest hva man måtte regne med, og forskjellige aktører handterte de 256 fargene forskjellig. Netscape lanserte sin "Color Cube", som oppnådde standardstatus i HTML 3.2 (januar 1997). Den var basert på hexverdiene 00, 33, 66, 99, cc og ff, og ga 216 farger (6x6x6) i kombinasjon. Disse fargene har stort sett*) god avstand til hverandre, dekker hele spekteret og er "rene".
*) - fx et sprang fra 00 til 33 i samme hex vil ikke gi stort utslag
I nåtid skal det godt gjøres å komme over utstyr som ikke støtter 24-bit "True Color" (256x256x256; ca 16,8 millioner farger). Man snakker etterhvert også om 32-bit "Deep Color" - da begynner det å bli mer enn hva øyet er i stand til å oppfatte - men kan man ikke da stille og rolig glemme disse usle 216?
Jo, værsågod, og det er da også hva de aller fleste gjør. Av yngre generasjon er det neppe mange som har hørt om det engang. Men dette har fortsatt en misjon: disse fargene er i seg selv harmoniske, og passer naturlig til hverandre. De er klare, og gir bedre mening for synshemmede enn mer diffuse blandinger. De oppfattes riktigere av ille kalibrert utstyr. De er absolutt å anbefale til skrift. Og ikke minst: de er enkle å huske, behandle og gå ut ifra for en webdesigner på skissestadiet.
Derfor gjengir jeg de her - om ikke annet, så for historiens skyld. Velbekomme:
| Black #000000 R: 0 G: 0 B: 0 |
- - - #330000 R: 51 G: 0 B: 0 |
- - - #660000 R: 102 G: 0 B: 0 |
- - - #990000 R: 153 G: 0 B: 0 |
- - - #CC0000 R: 204 G: 0 B: 0 |
Red #FF0000 R: 255 G: 0 B: 0 |
| - - - #003300 R: 0 G: 51 B: 0 |
- - - #333300 R: 51 G: 51 B: 0 |
- - - #663300 R: 102 G: 51 B: 0 |
- - - #993300 R: 153 G: 51 B: 0 |
- - - #CC3300 R: 204 G: 51 B: 0 |
- - - #FF3300 R: 255 G: 51 B: 0 |
| - - - #006600 R: 0 G: 102 B: 0 |
- - - #336600 R: 51 G: 102 B: 0 |
- - - #666600 R: 102 G: 102 B: 0 |
- - - #996600 R: 153 G: 102 B: 0 |
- - - #CC6600 R: 204 G: 102 B: 0 |
- - - #FF6600 R: 255 G: 102 B: 0 |
| - - - #009900 R: 0 G: 153 B: 0 |
- - - #339900 R: 51 G: 153 B: 0 |
- - - #669900 R: 102 G: 153 B: 0 |
- - - #999900 R: 153 G: 153 B: 0 |
- - - #CC9900 R: 204 G: 153 B: 0 |
- - - #FF9900 R: 255 G: 153 B: 0 |
| - - - #00CC00 R: 0 G: 204 B: 0 |
- - - #33CC00 R: 51 G: 204 B: 0 |
- - - #66CC00 R: 102 G: 204 B: 0 |
- - - #99CC00 R: 153 G: 204 B: 0 |
- - - #CCCC00 R: 204 G: 204 B: 0 |
- - - #FFCC00 R: 255 G: 204 B: 0 |
| Green #00FF00 R: 0 G: 255 B: 0 |
- - - #33FF00 R: 51 G: 255 B: 0 |
- - - #66FF00 R: 102 G: 255 B: 0 |
- - - #99FF00 R: 153 G: 255 B: 0 |
- - - #CCFF00 R: 204 G: 255 B: 0 |
Yellow #FFFF00 R: 255 G: 255 B: 0 |
| - - - #000033 R: 0 G: 0 B: 51 |
- - - #330033 R: 51 G: 0 B: 51 |
- - - #660033 R: 102 G: 0 B: 51 |
- - - #990033 R: 153 G: 0 B: 51 |
- - - #CC0033 R: 204 G: 0 B: 51 |
- - - #FF0033 R: 255 G: 0 B: 51 |
| - - - #003333 R: 0 G: 51 B: 51 |
- - - #333333 R: 51 G: 51 B: 51 |
- - - #663333 R: 102 G: 51 B: 51 |
- - - #993333 R: 153 G: 51 B: 51 |
- - - #CC3333 R: 204 G: 51 B: 51 |
- - - #FF3333 R: 255 G: 51 B: 51 |
| - - - #006633 R: 0 G: 102 B: 51 |
- - - #336633 R: 51 G: 102 B: 51 |
- - - #666633 R: 102 G: 102 B: 51 |
- - - #996633 R: 153 G: 102 B: 51 |
- - - #CC6633 R: 204 G: 102 B: 51 |
- - - #FF6633 R: 255 G: 102 B: 51 |
| - - - #009933 R: 0 G: 153 B: 51 |
- - - #339933 R: 51 G: 153 B: 51 |
- - - #669933 R: 102 G: 153 B: 51 |
- - - #999933 R: 153 G: 153 B: 51 |
- - - #CC9933 R: 204 G: 153 B: 51 |
- - - #FF9933 R: 255 G: 153 B: 51 |
| - - - #00CC33 R: 0 G: 204 B: 51 |
- - - #33CC33 R: 51 G: 204 B: 51 |
- - - #66CC33 R: 102 G: 204 B: 51 |
- - - #99CC33 R: 153 G: 204 B: 51 |
- - - #CCCC33 R: 204 G: 204 B: 51 |
- - - #FFCC33 R: 255 G: 204 B: 51 |
| - - - #00FF33 R: 0 G: 255 B: 51 |
- - - #33FF33 R: 51 G: 255 B: 51 |
- - - #66FF33 R: 102 G: 255 B: 51 |
- - - #99FF33 R: 153 G: 255 B: 51 |
- - - #CCFF33 R: 204 G: 255 B: 51 |
- - - #FFFF33 R: 255 G: 255 B: 51 |
| - - - #000066 R: 0 G: 0 B: 102 |
- - - #330066 R: 51 G: 0 B: 102 |
- - - #660066 R: 102 G: 0 B: 102 |
- - - #990066 R: 153 G: 0 B: 102 |
- - - #CC0066 R: 204 G: 0 B: 102 |
- - - #FF0066 R: 255 G: 0 B: 102 |
| - - - #003366 R: 0 G: 51 B: 102 |
- - - #333366 R: 51 G: 51 B: 102 |
- - - #663366 R: 102 G: 51 B: 102 |
- - - #993366 R: 153 G: 51 B: 102 |
- - - #CC3366 R: 204 G: 51 B: 102 |
- - - #FF3366 R: 255 G: 51 B: 102 |
| - - - #006666 R: 0 G: 102 B: 102 |
- - - #336666 R: 51 G: 102 B: 102 |
- - - #666666 R: 102 G: 102 B: 102 |
- - - #996666 R: 153 G: 102 B: 102 |
- - - #CC6666 R: 204 G: 102 B: 102 |
- - - #FF6666 R: 255 G: 102 B: 102 |
| - - - #009966 R: 0 G: 153 B: 102 |
- - - #339966 R: 51 G: 153 B: 102 |
- - - #669966 R: 102 G: 153 B: 102 |
- - - #999966 R: 153 G: 153 B: 102 |
- - - #CC9966 R: 204 G: 153 B: 102 |
- - - #FF9966 R: 255 G: 153 B: 102 |
| - - - #00CC66 R: 0 G: 204 B: 102 |
- - - #33CC66 R: 51 G: 204 B: 102 |
- - - #66CC66 R: 102 G: 204 B: 102 |
- - - #99CC66 R: 153 G: 204 B: 102 |
- - - #CCCC66 R: 204 G: 204 B: 102 |
- - - #FFCC66 R: 255 G: 204 B: 102 |
| - - - #00FF66 R: 0 G: 255 B: 102 |
- - - #33FF66 R: 51 G: 255 B: 102 |
- - - #66FF66 R: 102 G: 255 B: 102 |
- - - #99FF66 R: 153 G: 255 B: 102 |
- - - #CCFF66 R: 204 G: 255 B: 102 |
- - - #FFFF66 R: 255 G: 255 B: 102 |
| - - - #000099 R: 0 G: 0 B: 153 |
- - - #330099 R: 51 G: 0 B: 153 |
- - - #660099 R: 102 G: 0 B: 153 |
- - - #990099 R: 153 G: 0 B: 153 |
- - - #CC0099 R: 204 G: 0 B: 153 |
- - - #FF0099 R: 255 G: 0 B: 153 |
| - - - #003399 R: 0 G: 51 B: 153 |
- - - #333399 R: 51 G: 51 B: 153 |
- - - #663399 R: 102 G: 51 B: 153 |
- - - #993399 R: 153 G: 51 B: 153 |
- - - #CC3399 R: 204 G: 51 B: 153 |
- - - #FF3399 R: 255 G: 51 B: 153 |
| - - - #006699 R: 0 G: 102 B: 153 |
- - - #336699 R: 51 G: 102 B: 153 |
- - - #666699 R: 102 G: 102 B: 153 |
- - - #996699 R: 153 G: 102 B: 153 |
- - - #CC6699 R: 204 G: 102 B: 153 |
- - - #FF6699 R: 255 G: 102 B: 153 |
| - - - #009999 R: 0 G: 153 B: 153 |
- - - #339999 R: 51 G: 153 B: 153 |
- - - #669999 R: 102 G: 153 B: 153 |
- - - #999999 R: 153 G: 153 B: 153 |
- - - #CC9999 R: 204 G: 153 B: 153 |
- - - #FF9999 R: 255 G: 153 B: 153 |
| - - - #00CC99 R: 0 G: 204 B: 153 |
- - - #33CC99 R: 51 G: 204 B: 153 |
- - - #66CC99 R: 102 G: 204 B: 153 |
- - - #99CC99 R: 153 G: 204 B: 153 |
- - - #CCCC99 R: 204 G: 204 B: 153 |
- - - #FFCC99 R: 255 G: 204 B: 153 |
| - - - #00FF99 R: 0 G: 255 B: 153 |
- - - #33FF99 R: 51 G: 255 B: 153 |
- - - #66FF99 R: 102 G: 255 B: 153 |
- - - #99FF99 R: 153 G: 255 B: 153 |
- - - #CCFF99 R: 204 G: 255 B: 153 |
- - - #FFFF99 R: 255 G: 255 B: 153 |
| - - - #0000CC R: 0 G: 0 B: 204 |
- - - #3300CC R: 51 G: 0 B: 204 |
- - - #6600CC R: 102 G: 0 B: 204 |
- - - #9900CC R: 153 G: 0 B: 204 |
- - - #CC00CC R: 204 G: 0 B: 204 |
- - - #FF00CC R: 255 G: 0 B: 204 |
| - - - #0033CC R: 0 G: 51 B: 204 |
- - - #3333CC R: 51 G: 51 B: 204 |
- - - #6633CC R: 102 G: 51 B: 204 |
- - - #9933CC R: 153 G: 51 B: 204 |
- - - #CC33CC R: 204 G: 51 B: 204 |
- - - #FF33CC R: 255 G: 51 B: 204 |
| - - - #0066CC R: 0 G: 102 B: 204 |
- - - #3366CC R: 51 G: 102 B: 204 |
- - - #6666CC R: 102 G: 102 B: 204 |
- - - #9966CC R: 153 G: 102 B: 204 |
- - - #CC66CC R: 204 G: 102 B: 204 |
- - - #FF66CC R: 255 G: 102 B: 204 |
| - - - #0099CC R: 0 G: 153 B: 204 |
- - - #3399CC R: 51 G: 153 B: 204 |
- - - #6699CC R: 102 G: 153 B: 204 |
- - - #9999CC R: 153 G: 153 B: 204 |
- - - #CC99CC R: 204 G: 153 B: 204 |
- - - #FF99CC R: 255 G: 153 B: 204 |
| - - - #00CCCC R: 0 G: 204 B: 204 |
- - - #33CCCC R: 51 G: 204 B: 204 |
- - - #66CCCC R: 102 G: 204 B: 204 |
- - - #99CCCC R: 153 G: 204 B: 204 |
- - - #CCCCCC R: 204 G: 204 B: 204 |
- - - #FFCCCC R: 255 G: 204 B: 204 |
| - - - #00FFCC R: 0 G: 255 B: 204 |
- - - #33FFCC R: 51 G: 255 B: 204 |
- - - #66FFCC R: 102 G: 255 B: 204 |
- - - #99FFCC R: 153 G: 255 B: 204 |
- - - #CCFFCC R: 204 G: 255 B: 204 |
- - - #FFFFCC R: 255 G: 255 B: 204 |
| Blue #0000FF R: 0 G: 0 B: 255 |
- - - #3300FF R: 51 G: 0 B: 255 |
- - - #6600FF R: 102 G: 0 B: 255 |
- - - #9900FF R: 153 G: 0 B: 255 |
- - - #CC00FF R: 204 G: 0 B: 255 |
Magenta #FF00FF R: 255 G: 0 B: 255 |
| - - - #0033FF R: 0 G: 51 B: 255 |
- - - #3333FF R: 51 G: 51 B: 255 |
- - - #6633FF R: 102 G: 51 B: 255 |
- - - #9933FF R: 153 G: 51 B: 255 |
- - - #CC33FF R: 204 G: 51 B: 255 |
- - - #FF33FF R: 255 G: 51 B: 255 |
| - - - #0066FF R: 0 G: 102 B: 255 |
- - - #3366FF R: 51 G: 102 B: 255 |
- - - #6666FF R: 102 G: 102 B: 255 |
- - - #9966FF R: 153 G: 102 B: 255 |
- - - #CC66FF R: 204 G: 102 B: 255 |
- - - #FF66FF R: 255 G: 102 B: 255 |
| - - - #0099FF R: 0 G: 153 B: 255 |
- - - #3399FF R: 51 G: 153 B: 255 |
- - - #6699FF R: 102 G: 153 B: 255 |
- - - #9999FF R: 153 G: 153 B: 255 |
- - - #CC99FF R: 204 G: 153 B: 255 |
- - - #FF99FF R: 255 G: 153 B: 255 |
| - - - #00CCFF R: 0 G: 204 B: 255 |
- - - #33CCFF R: 51 G: 204 B: 255 |
- - - #66CCFF R: 102 G: 204 B: 255 |
- - - #99CCFF R: 153 G: 204 B: 255 |
- - - #CCCCFF R: 204 G: 204 B: 255 |
- - - #FFCCFF R: 255 G: 204 B: 255 |
| Cyan #00FFFF R: 0 G: 255 B: 255 |
- - - #33FFFF R: 51 G: 255 B: 255 |
- - - #66FFFF R: 102 G: 255 B: 255 |
- - - #99FFFF R: 153 G: 255 B: 255 |
- - - #CCFFFF R: 204 G: 255 B: 255 |
White #FFFFFF R: 255 G: 255 B: 255 |
ROFL! Å nei, du slipper ikke til her. Khawaga kommenterer aldri noen steder, og tillater heller ikke slikt selv. Men han er ikke *helt* anus: dersom du har noe meningsfylt å bidra med, send mail ved å trykke på knappen. Det er slett ikke umulig at det kommer med som tillegg.
