Color Picker Pro
Selector de colores avanzado con soporte de múltiples formatos
Formatos de color
Armonía de colores
Color Picker Pro
Selector de colores avanzado con soporte de múltiples formatos
Características
- Elija colores mediante deslizadores tono/saturación/luminosidad o pegue un valor HEX, RGB o HSL para sincronizar todos los canales al instante
- Salida en seis formatos simultáneamente: HEX, RGB, RGBA, HSL, HSLA y CMYK (listo para impresión, sin incrustar perfil)
- Ratio de contraste WCAG 2.1 contra cualquier color de texto prueba, con insignias AA (4.5:1) y AAA (7:1) usando luminancia relativa según fórmula W3C
- Generador de armonía produciendo variantes complementaria, triádica, análoga y monocromática desde el tono actual
- Paletas curadas incluyendo Material Design, Tailwind CSS y un set alto-contraste enfocado a accesibilidad
- Historial local de colores con hasta 20 selecciones recientes persistido en localStorage (limpiado bajo demanda, nunca sincronizado)
- Soporte canal alfa para salidas RGBA y HSLA listas para integrar en custom properties CSS
- Colores muestra aleatorios y copia de un clic para cualquier cadena de formato individual
Cómo usar
- Arrastre los deslizadores de tono/saturación/luminosidad o pegue un HEX conocido para dirigir el selector desde un punto inicial.
- Ajuste el deslizador alfa si necesita transparencia para overlay, efecto cristal o token de diseño.
- Abra el panel Formatos para ver HEX, RGB(A), HSL(A) y CMYK lado a lado y copiar el que su stack espere.
- Active el panel Accesibilidad y fije un color texto prueba para verificar que el ratio WCAG cumpla AA o AAA antes de enviar.
- Abra Armonía para tomar acompañantes complementarios, triádicos o análogos para una paleta equilibrada.
- Añada selecciones al Historial mientras experimenta; haga clic en cualquier muestra para recuperarla luego.
Consejos y buenas prácticas
- Previsualice cambios en tiempo real al ajustar configuraciones.
- Copie el código generado directamente en su hoja de estilos CSS.
- Pruebe sus diseños en modo claro y oscuro para accesibilidad.
- Use herramientas dev del navegador junto con esta herramienta para pruebas live.
- Guarde sus configuraciones favoritas para acceso rápido.
Preguntas frecuentes
¿Por qué el mismo HEX muestra valores RGB diferentes en otras herramientas?
Los valores de color pueden especificarse en sRGB o display-P3, y los navegadores los renderizan diferente según calibración monitor y perfiles ICC. Este selector usa sRGB (default CSS Color Module Level 3) y redondea a canales 8 bits (0–255). Para tokens de diseño wide-gamut use una herramienta P3 y convierta con notación color() de CSS Color Level 4.
¿Cómo se calcula el ratio de contraste WCAG?
El ratio usa la fórmula de luminancia relativa W3C: cada canal sRGB se lineariza (gamma sRGB-a-lineal), pondera 0.2126R + 0.7152G + 0.0722B, luego las luminancias clara y oscura se combinan como (L1 + 0.05) / (L2 + 0.05). AA pasa a 4.5:1 para texto normal y 3:1 para texto grande; AAA a 7:1. Las matemáticas corren en su navegador sobre el par frente/fondo actual.
¿Se envía algo a un servidor al elegir un color?
No. Conversiones de color, búsqueda de paletas, matemáticas de contraste e historial corren del lado cliente en JavaScript. El único almacenamiento persistente es localStorage para el historial, que vive en su dispositivo y nunca lo deja. Puede usar la herramienta sin conexión una vez cacheada la página.
¿Por qué la salida CMYK no coincide exactamente con mis Pantone o Adobe?
CMYK es dependiente de dispositivo y requiere perfil ICC para ser preciso en impresión. Herramientas de navegador no pueden incrustar perfil CMYK, así la salida es una conversión sRGB-CMYK ingenua, útil solo como referencia rápida. Para producción genere CMYK en Photoshop o Illustrator con el perfil de su impresora, o pida muestras verificadas a su imprenta.
¿Cómo elige el generador de armonía sus colores?
El generador rota el tono HSL actual: complementario es +180 grados, triádico añade dos colores a +120 y +240, análogo añade vecinos a +30 y +330, monocromático cambia saturación y luminosidad. Es un enfoque mecánico de rueda cromática: da un punto inicial pero no considera uniformidad perceptiva, que requeriría Oklch o Lab.
¿Puedo usar estos valores directamente como CSS custom properties?
Sí. La salida HSL encaja directo en CSS moderno como `--brand: hsl(217 100% 60%)` o con alfa `hsla(217, 100%, 60%, 0.8)`. HSL se prefiere generalmente para tokens de diseño porque las rampas de luminosidad se vuelven triviales — subir el tercer valor da estados hover y active instantáneos sin recalcular RGB.
¿El selector soporta display-P3 o salida wide-gamut?
Actualmente no. El selector asume sRGB y emite HEX/RGB 8 bits por canal. Si necesita P3 o Rec.2020, use una herramienta que emita sintaxis CSS Color Level 4 como `color(display-p3 0.4 0.5 0.9)`. Lo podríamos añadir cuando el soporte en navegadores se estabilice en todos los targets.
¿Por qué desapareció mi historial de colores guardado?
El historial persiste en localStorage atado a este dominio. Borrar datos del navegador, usar modo privado/incógnito o cambiar de navegador lo reinicia. El tope es 20 entradas para evitar problemas de cuota — selecciones más antiguas se desalojan al añadir nuevas.