Koło kolorów

Narzędzie renderuje pierścień barwy składający się z 360 segmentów na płótnie HTML i pozwala wybrać barwę poprzez kliknięcie lub przeciąganie po pierścieniu. Nasycenie i jasność ustawia się suwakami, a wybrany kolor jest pokazywany jako próbka z kopiowalnymi ciągami HEX, RGB i HSL. Przycisk Reset przywraca barwę 0, nasycenie 100 i jasność 50.

1. Kliknij lub przeciągnij wewnątrz kolorowego pierścienia, aby ustawić barwę; pierścień jest rysowany przy bieżącym nasyceniu i jasności. 2. Dostosuj Hue (0-360), Saturation (0-100) i Lightness (0-100) za pomocą suwaków lub pól liczbowych. 3. Obserwuj aktualizację próbki Preview i wskaźnika na pierścieniu w czasie rzeczywistym. 4. Skopiuj HEX, RGB lub HSL, używając przycisków w karcie Color Values. 5. Kliknij Reset, aby powrócić do wartości domyślnych.

Koło to płótno 260px rysowane w proporcji pikseli urządzenia dla ostrości, z zewnętrznym pierścieniem barwy i pustym środkiem. Zdarzenia wskaźnika są przechwytywane, więc przeciąganie podąża za kursorem; kliknięcia w wewnętrznym otworze lub poza zewnętrzną krawędzią są ignorowane. Okrągły wskaźnik znajduje się przy wybranej barwie i jest wypełniony bieżącym kolorem. Barwa jest wyliczana z kąta wskaźnika względem środka, przy czym 0deg znajduje się na górze. Nasycenie i jasność zmieniają kolory każdego segmentu pierścienia, a nie geometrię.