Roda de Cores

Esta ferramenta renderiza um anel de matiz com 360 segmentos em um canvas HTML e permite que você escolha uma matiz clicando ou arrastando no anel. Saturação e luminosidade são definidas por meio de controles deslizantes, e a cor selecionada é mostrada como uma amostra com strings HEX, RGB e HSL copiáveis. Um botão Reset restaura a matiz 0, a saturação 100 e a luminosidade 50.

1. Clique ou arraste dentro do anel colorido para definir a matiz; o anel é desenhado com a saturação e a luminosidade atuais. 2. Ajuste Hue (0-360), Saturation (0-100) e Lightness (0-100) com os controles deslizantes ou as entradas numéricas. 3. Observe a amostra Preview e o indicador no anel sendo atualizados ao vivo. 4. Copie HEX, RGB ou HSL usando os botões no cartão Color Values. 5. Clique em Reset para retornar aos padrões.

A roda é um canvas de 260px desenhado na proporção de pixels do dispositivo para maior nitidez, com um anel de matiz externo e um centro vazio. Os eventos de ponteiro são capturados para que o arraste acompanhe o cursor; cliques dentro do furo interno ou fora da borda externa são ignorados. Um indicador circular fica na matiz selecionada e é preenchido com a cor atual. A matiz é derivada do ângulo do ponteiro em relação ao centro, com 0deg no topo. Saturação e luminosidade alteram as cores de cada segmento do anel, não a geometria.