Колесо цветов

Этот инструмент отрисовывает кольцо цветового тона из 360 сегментов на HTML-холсте и позволяет выбрать тон кликом или перетаскиванием по кольцу. Насыщенность и светлота задаются ползунками, а выбранный цвет отображается как образец с копируемыми строками HEX, RGB и HSL. Кнопка Reset возвращает тон 0, насыщенность 100 и светлоту 50.

1. Кликните или перетащите внутри цветного кольца, чтобы задать тон; кольцо отрисовывается при текущей насыщенности и светлоте. 2. Отрегулируйте Hue (0-360), Saturation (0-100) и Lightness (0-100) с помощью ползунков или числовых полей. 3. Наблюдайте, как образец Preview и индикатор на кольце обновляются в реальном времени. 4. Скопируйте HEX, RGB или HSL с помощью кнопок в карточке Color Values. 5. Нажмите Reset, чтобы вернуться к значениям по умолчанию.

Круг — это холст размером 260px, отрисованный с учётом коэффициента пикселей устройства для чёткости, с внешним кольцом тона и пустым центром. События указателя перехватываются, поэтому перетаскивание следует за курсором; клики во внутреннем отверстии или за внешним краем игнорируются. Круглый индикатор располагается на выбранном тоне и закрашен текущим цветом. Тон выводится из угла указателя относительно центра, причём 0deg находится сверху. Насыщенность и светлота изменяют цвета каждого сегмента кольца, а не геометрию.