Kruiswiel

Deze tool tekent een tint-ring met 360 segmenten op een HTML-canvas en laat u een tint kiezen door op de ring te klikken of te slepen. Verzadiging en helderheid worden via schuifregelaars ingesteld en de geselecteerde kleur wordt als staal getoond met kopieerbare HEX-, RGB- en HSL-strings. Een Reset-knop herstelt tint 0, verzadiging 100 en helderheid 50.

1. Klik of sleep binnen de gekleurde ring om de tint in te stellen; de ring wordt getekend met de huidige verzadiging en helderheid. 2. Pas Hue (0-360), Saturation (0-100) en Lightness (0-100) aan met de schuifregelaars of numerieke invoer. 3. Zie hoe het Preview-staal en de indicator op de ring live worden bijgewerkt. 4. Kopieer HEX, RGB of HSL met de knoppen in de kaart Color Values. 5. Klik op Reset om terug te keren naar de standaardwaarden.

Het wiel is een 260px canvas dat op de apparaat-pixelverhouding wordt getekend voor scherpte, met een buitenste tint-ring en een leeg midden. Pointer-gebeurtenissen worden vastgelegd zodat het slepen de cursor volgt; klikken in het binnenste gat of buiten de buitenrand worden genegeerd. Een cirkelvormige indicator staat op de geselecteerde tint en is gevuld met de huidige kleur. De tint wordt afgeleid van de hoek van de pointer ten opzichte van het midden, waarbij 0deg boven staat. Verzadiging en helderheid veranderen de kleuren van elk ringsegment, niet de geometrie.