Color Picker

Acerca de esta herramienta

El Selector de Color te permite elegir visualmente cualquier color y ver al instante sus representaciones HEX, RGB y HSL. Usa el selector de color nativo para una selección amplia o los controles deslizantes RGB para un control preciso a nivel de canal.

Los colores seleccionados se guardan automáticamente en el historial de colores recientes, para que puedas volver a un color rápidamente sin volver a escribirlo. Útil para comparar variaciones de color o construir una paleta.

Cómo usar

1. Haz clic en el swatch de color grande para abrir el selector de color nativo del navegador y elige un color.
2. Arrastra los controles R, G y B para ajustar con precisión los canales de color individuales.
3. Haz clic en Copiar junto a HEX, RGB o HSL para copiar el valor al portapapeles.
4. Los colores copiados aparecen en la fila de Colores recientes — haz clic en cualquier swatch para restaurarlo.

Casos de uso

Los diseñadores web seleccionan colores exactos de una guía de marca y copian códigos hex en CSS. Los desarrolladores ajustan valores RGB para trabajo con canvas o WebGL. Los diseñadores UI comparan variaciones sutiles en el mismo tono ajustando un solo control.

Preguntas frecuentes

• ¿Se guardan permanentemente los colores seleccionados? — No. Los Colores recientes se almacenan en el estado del componente y se reinician cuando sales de la página o actualizas. Para almacenamiento permanente, copia los códigos hex a tus propias notas.
• ¿Puedo escribir un código hex directamente? — Sí. Usa el campo de entrada hex del selector de color nativo (disponible en la mayoría de navegadores) para escribir un valor hex directamente.
• ¿Qué es HSL y por qué es útil? — HSL significa Tono (Hue), Saturación (Saturation) y Luminosidad (Lightness). Describe el color de forma intuitiva — cambiar el valor de luminosidad hace el color más claro u oscuro manteniendo el mismo tono, útil para generar tintes y sombras.