Ben's Hobbyhoekje -- Over input type="color"

Over <input type="color">

In het item Layoutaanpassingen met behulp van CSS-variabelen wordt een voorbeeld getoond waarmee de kleur van een tweetal blokken van een webdocument kunt veranderen. Daarbij wordt gebruik gemaakt van een attribuut van de tag <input> dat nieuw is in HTML5: type="color". De kleur op de knop stel je in met een value-attribuut. Je kunt daar een geldige kleur-waarde instellen, bijvoorbeeld value="#ffff00".

De waarde van value moet bestaan uit zes hexadecimale cijfers, met een # ervoor. Andere kleuraanduidingen, zoals #ff0 of yellow, werken niet. CSS-functions zoals rgb(255,255,0) of hsl(60, 100%, 50%) doen het ook niet. Bij een onjuiste kleurcode wordt de kleur op de knop zwart.

De code <input type="color" value="#ffff00"> toont de knop: .

Als je op de knop klikt, verschijnt er een kleurenkiezer waarin je een nieuwe kleur kunt instellen. De manier waarop verschilt per browser, of beter: het platform. Het gaat dus om de combinatie van Operating System met de browser.
Hieronder een paar voorbeelden, die zijn gemaakt met een desktop-PC met Windows 10 (1909) en een mobiele telefoon met Android 9.

De knoppen in het hiervoor genoemde voorbeeld zien er uit als op onderstaand plaatje.

Knoppen in het voorbeeld .

Door op onderstaande links te klikken krijg je te zien hoe kleurenkiezer er op de verschillende platformen er uit ziet. Door nogmaals te klikken verdwijnt het weer.
Dit geldt voor de status op mijn PC en smartphone, op 26 januari 2020.

Voor de kleuren op je webpagina gebruik je CSS-variabelen, die je verandert met JavaScript; CSS verandert dan de kleuren.

Tenslotte:

Zie het item Variabelen in CSS voor informatie over CSS-variabelen.
Informatie over kleuren in het algemeen is te vinden in het item Kleurcodes voor tekst, links en achtergrond.
Een kleurenkiezer die veel zwaarder leunt op JavaScript en die er daardoor in alle browsers het zelfde uitziet, vind je in het item JavaScript color-picker.