Usa este selector de color online para elegir un color desde una imagen subida, tomar un color de la pantalla cuando tu navegador lo permita o introducir un valor de color manualmente. Convierte el color seleccionado, extrae paletas de imágenes, genera colores relacionados, comprueba el contraste del texto y copia variables CSS sin cambiar de página.
Elige una imagen local, mueve el cursor sobre ella para previsualizar los píxeles y haz clic para seleccionar un color. Después de hacer clic, usa las teclas de flecha para ajustar el píxel seleccionado.
Usa el selector de color de pantalla del navegador cuando esté disponible. El navegador puede tardar un momento en abrir el selector nativo.
Introduce HEX o HEXA, por ejemplo #2563EB o #2563EBFF.
Acerca del selector de color online
Usa este selector de color online para elegir un color desde una imagen subida, tomar un color de la pantalla cuando tu navegador lo permita o introducir un valor de color manualmente. El color seleccionado se convierte al instante a formatos habituales como HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV y CMYK, para que puedas copiar el valor que necesitas sin cambiar de página.• Funciones
Selector de color desde imagen: Elige una imagen local y mueve el cursor sobre ella para previsualizar los píxeles cercanos. Haz clic en la imagen para seleccionar el color actual. Extracción de paleta de imagen: Después de subir una imagen, la herramienta extrae una paleta compacta con sus colores principales, que se pueden copiar o aplicar como color actual. Ajuste a nivel de píxel: Después de seleccionar un color desde una imagen, usa las teclas de flecha para ajustar con más precisión la posición del píxel seleccionado. Selector de color de pantalla: Usa el selector de pantalla del navegador para elegir un color de la pantalla cuando esta función esté disponible en tu navegador. Entrada manual de color: Introduce un color manualmente mediante un selector de color o un valor HEX / HEXA como #2563EB o #2563EBFF. Múltiples formatos de color: Convierte el color seleccionado a formatos HEX, HEXA, RGB, RGBA, HSL, HSLA, HSV y CMYK. Colores relacionados: Genera opciones complementarias, análogas, triádicas, tintes suaves y tonos apagados a partir del color actual. Tintes y sombras: Crea una escala práctica de claro a oscuro que puede usarse para fondos, bordes, estados hover, insignias y componentes de interfaz. Contraste de texto y combinación para UI: Compara texto blanco y negro mediante contraste WCAG, muestra una referencia perceptual de tipo APCA y sugiere una combinación de interfaz más cómoda cuando un color muy saturado necesita un fondo más oscuro o más claro. Variables CSS: Copia variables CSS listas para usar para el color actual, sus variantes clara y oscura, un color de texto legible y la combinación recomendada de fondo/texto para UI. Procesamiento en el navegador: La lectura de imágenes, la selección de colores, la extracción de paletas y la conversión de colores se realizan directamente en tu navegador, sin instalar una aplicación aparte.• Notas
El selector de pantalla depende de la compatibilidad del navegador. En navegadores que no admiten la selección de color desde pantalla, puedes seguir usando la selección desde imagen o la entrada manual. Al elegir colores desde una imagen, la imagen puede escalarse para ajustarse a la página, pero el color muestreado se asigna de nuevo a la posición del píxel en la imagen original. El contraste de texto se calcula a partir del color sólido seleccionado. Cuando el texto aparece sobre degradados, fotos, transparencias o fondos con textura, conviene comprobar también el diseño final de forma visual. El valor de tipo APCA se ofrece como referencia perceptual junto al contraste WCAG. El contraste WCAG sigue siendo la comprobación de accesibilidad de aprobado/no aprobado en esta página. En colores usados en interfaces, documentos, imágenes o materiales impresos, el aspecto final puede variar según los ajustes de pantalla, los perfiles de color, los formatos de archivo y los dispositivos de salida. :wiki_link