RGB-kleurcodes omzetten in CMYK, en omgekeerd

Bij het ontwerpen van een website wordt vaak uitgegaan van een huisstijl. De kleuren van het briefpapier, het logo, enz., moeten dan in de juiste kleuren in de website worden geprogrammeerd.

De kleuren op je beeldscherm worden gemaakt door menging van de basiskleuren Rood, Groen en Blauw (RGB).
Voor 'gewoon' kleurendrukwerk gebruikt men de basiskleuren Cyaan, Magenta en Geel, aangevuld met Zwart (CMYK).

Als de CMYK-code beschikbaar is, moet die dus worden omgerekend in RGB om de kleur op het scherm weer te kunnen geven.
Andersom kan ook voorkomen: Van iets dat op een beeldscherm is ontworpen moet, om het in druk te kunnen brengen, de RGB-kleurcode worden omgerekend in CMYK.

Dit zijn geen heel erg moeilijke berekeningen, maar ze moeten wel zorgvuldig worden uitgevoerd, anders krijg je kleurafwijkingen. Een computerprogramma dat deze conversies uitvoert kan daarbij goede diensten bewijzen.

Op deze bladzijde wordt een dergelijk conversie programma besproken. Het is geschreven in HTML en JavaScript.
Halverwege deze bladzijde staat een drukknop om het programma te starten. De code van deze applicatie kun je downloaden om zelf te gebruiken, zie onderaan deze bladzijde.

Deze bladzijde gaat over het omzetten van RGB in CMYK. Deze twee kleurweergave systemen worden uitgebreid besproken in het item:

• Kleurcodes voor tekst, links en achtergrond

Andere interessante informatie is te vinden in:

• Over het Pantone Matching System (PMS) voor kleuren
• Over het RAL-systeem voor kleuren
• Over kleurgebruik op je website

• Er worden twee items besproken:
  1. Werking en oorsprong van het programma
  2. Inbouwen in je eigen site
   
• Het programma is een vrije bewerking van een soortgelijk programma, dat ik heb gevonden op een oude website van de Universiteit van Queensland in Australië. Die site bestaat niet meer, maar op dit hobbyhoekje blijft het gewoon beschikbaar.
  Ik heb het programma in het Nederlands vertaald, de opmaak verfraaid en hier beschikbaar gemaakt. Hyperlinks en andere verwijzingen in het oorpronkelijke programma zijn verwijderd. Het rekengedeelte is ongewijzigd gelaten.
  Het originele programma heb ik bewaard. Stuur me een mailtje als je er belangstelling voor hebt.
   
• Het probleem bij de omrekening zijn de ongelijke aantallen basiskleuren: 3 bij RGB en 4 bij CMYK. Daarom gebruikt het programma het CMY-systeem bij de conversie. Het CMY-syteem is gelijk aan het CMYK-systeem, maar het zwart (K) is verdeeld over de andere kleuren. De berekende CMY-code wordt als uitvoer gegeven.
• Als uitvoer wordt ook de "Grijswaarde" gegeven, op een schaal van 0 t.m. 255. Dit is van belang voor de liefhebbers van zwart-wit graphics.
   
• Als eerste kies je aan welke invoer je geeft: RGB of CMYK. Dat bepaalt hoe het invulformulier er uitziet en welke uitvoer er verschijnt.
  Daarna geef je de invoer in en kies je Converteren.
  Klik op de knop hiernaast om het programma te starten.
   
• RGB invoer is voor elke basiskleur een geheel getal, van 0 tot en met 255.
  Als uitvoer is er:
  • De ingevoerde RGB-kleurcode, uitgedrukt in Hexadecimale getallen.
  • De dichtstbij gelegen "Browser-veilige" kleur.
  • Het volgnummer (0 t.m. 215) in het browser-veilige kleurenpalet.
  • De berekende waarden (percentages) in het CMY-systeem.
  • • De berekende waarden (percentages) in het CMYK-systeem.
  • De berekende grijswaarden (percentage) in het 256 grijswaarden systeem.
   
• CMYK invoer is voor elke basiskleur een geheel getal, van 0 tot en met 100 (percentage).
  Als uitvoer is er:
  • De berekende waarden (percentages) in het CMY-systeem.
  • • De berekende waarden (0 t.m. 255) in het RGB-systeem.
  • De berekende RGB-kleurcode, uitgedrukt in Hexadecimale getallen.
  • De dichtstbij gelegen "Browser-veilige" kleur.
  • Het volgnummer (0 t.m. 215) in het browser-veilige kleurenpalet.
  • De berekende grijswaarden (percentage) in het 256 grijswaarden systeem.
   

Opmerking:
Drukwerk wordt bekeken bij opvallend (weerkaatst) licht. De kleurwaarneming is afhankelijk van de lichtbron. 's Avonds bij lamplicht ziet het er anders uit dan overdag. Beoordeel kleuren daarom alleen bij daglicht.
Een ander punt waar je rekening mee moet houden is dat een beeldscherm zelf licht geeft. Papier reflecteert alleen. De helderheid en contrast-omvang die op een beeldscherm mogelijk zijn, kun je met papier dus nooit realiseren. Als je voor drukwerk een kleur kiest vanaf een beeldscherm, zal het gedrukte resultaat altijd tegenvallen.
Een derde punt waar je rekening mee moet houden is dat elk afzonderlijk beeldscherm altijd een (lichte) kleurafwijking heeft. Beeldschermkleuren bepalen met een kleurenkaart is dus altijd een benadering!
De kleuren wijken af zichtbaar als je gaat printen. Want ook printers en printerdrivers hebben weer hun eigen kleurzweeem.

Gebruik:

• De code voor het openen van het pop-up venster staat in de <HEAD>.
• De code voor de button staat in de <BODY>, op de plaats waar je hem nodig hebt.
• Het conversieprogramma staat in de file rgb-cmyk-g.htm.
• Verdere aanwijzingen staan hieronder en in de download-file.

Voor een toelichting op het openen van een popup-venster kun je kijken in het item Window openen/sluiten vanuit een ander window.

Downloaden:
 
Druk op de knop:  File: voorb230.zip, 9411 bytes.

Opmerking:
 
Een vergelijkbaar conversie-programma voor het omzetten van kleuren tussen het RGB-systeem en het HSL-systeem vind je bij het item RGB-kleurcodes omzetten in HSL, en omgekeerd.

Opmerkingen m.b.t. de applicatie:
 
De code waarmee de rechter muistoets wordt uitgeschakeld vind je in het item Rechter muisknop uitschakelen (file: nortbutt.js).
 
De code van de gefixeerde 'sluiten'-knop wordt besproken in het item Terug- of Top-knop op een vaste plaats op het scherm (file: jumpcls2.css).