Rueda de colores

Esta herramienta renderiza un anillo de tono de 360 segmentos en un canvas HTML y te permite elegir un tono haciendo clic o arrastrando sobre el anillo. La saturación y la luminosidad se ajustan mediante deslizadores, y el color seleccionado se muestra como una muestra con cadenas HEX, RGB y HSL copiables. Un botón Reset restaura el tono 0, la saturación 100 y la luminosidad 50.

1. Haz clic o arrastra dentro del anillo de color para establecer el tono; el anillo se dibuja con la saturación y la luminosidad actuales. 2. Ajusta Hue (0-360), Saturation (0-100) y Lightness (0-100) con los deslizadores o las entradas numéricas. 3. Observa cómo se actualizan en vivo la muestra Preview y el indicador en el anillo. 4. Copia HEX, RGB o HSL usando los botones de la tarjeta Color Values. 5. Haz clic en Reset para volver a los valores predeterminados.

La rueda es un canvas de 260px dibujado a la relación de píxeles del dispositivo para mayor nitidez, con un anillo de tono exterior y un centro vacío. Los eventos de puntero se capturan de modo que el arrastre sigue al cursor; los clics dentro del agujero interior o fuera del borde exterior se ignoran. Un indicador circular se sitúa en el tono seleccionado y se rellena con el color actual. El tono se deriva del ángulo del puntero respecto al centro, con 0deg en la parte superior. La saturación y la luminosidad cambian los colores de cada segmento del anillo, no la geometría.