Ben's Hobbyhoekje -- JavaScript color-picker

JavaScript color-picker

Bij de meeste grafische ontwerpen (waaronder websites) ontkom je er niet aan om kleuren te gebruiken. Bij het kiezen van de kleuren kan een color-picker goede diensten bewijzen. Elk programma waarmee je kunt tekenen of foto's bewerken heeft er wel een of meerdere color-pickers aan boord, waarmee je kleuren kunt kiezen uit een verzameling standaard-kleuren of uit een continu palet.
Een dergelijke color-picker kun je heel goed schrijven in HTML en JavaScript. Hoewel het nut voor de meeste on-line toepassingen beperkt is, is deze te mooi om niet te laten zien. Al was het alleen maar om de mogelijkheden van JavaScript te illustreren.

Hier wordt een color-picker besproken die de naam JsColor heeft. Hij is gemaakt door de Tsjechische ontwikkelaar Jan Odvárko. Voor het downloaden van de code verwijs ik naar de website: jscolor.com. We beginnen met een demo:

Er verschijnt een kleurenpalet.
Je kiest een kleur door het kruis te verslepen met de muis.
De helderheid stel je bij met de verticale schuifregelaar.
De hexadecimale waarde van de gekozen kleur staat in het invoerveld.
Zie ook het item Kleurcodes voor tekst, links en achtergrond.

Inbouwen in je website is eenvoudig. Ga naar jscolor.com en download de code Pak de zip-file uit. In de <HEAD> neem je deze regel code op:

<script src="jscolor.js"></script>

In de <BODY>, op de plaats waar de color-picker moet komen, neem de deze code op:

<input class="color">

Hiermee heb je de meest eenvoudige installatie klaar.

De color-picker is op heel veel manieren instelbaar. Voorbeelden daarvan vind je op de website van JsColor. Je kunt ook met HTML en CSS nog wat regelen. Zo is op deze bladzijde de code gebruikt:

<form>
<table border="0" cellpadding="5" cellspacing="2"><tr>
<td>Klik met de muis in het vak hiernaast:</td>
<td><input class="color {pickerMode:'HSV'}" value="E4E9F6"
style="width:200px; height:40px; padding:8px; margin:10px 50px;
border:1px solid teal"></td>
</tr></table>
</form>

In het voorbeeld op deze bladzijde wordt een palet gebruikt waarvan de kleuren verlopen in helderheid van 50% (= 'volle' kleur) naar 100% (=wit). Dat stel je in door bij aan class color toe te voegen:

{pickerMode:'HSV'}
Er is ook een palet beschikbaar waarvan de kleuren verlopen in helderheid van 50% (= 'volle' kleur) naar 0% (=zwart). Daarvoor gebruik je

{pickerMode:'HVS'}
Over de helderheid van kleuren van 0% tot 100% wordt geschreven in het item RGB-kleurcodes omzetten in HSL, en omgekeerd.

Opmerking:

In browsers die draaien op Android, in combinatie met een aanraakscherm en een schermtoetsenbord, kan het gebeuren dat de opmaak van de pagina wordt verstoord als je oop het vak met de kleurcode tikt. Dat gebeurt als de pagina in een <frame> of <iframe> staat. Met de muis gaat het altijd goed.

In het item Over <input type="color"> wordt een kleurenkiezer besproken die gebruik maakt van CSS.