Selector de color de imagen
Sube, suelta o pega una imagen y luego haz clic o toca cualquier píxel para obtener su código HEX, RGB y HSL exacto. Una lupa te ayuda a acertar el píxel correcto, y el extractor de paletas encuentra los colores dominantes de la imagen.
Última actualización:
Elegir de la pantalla requiere la EyeDropper API (Chrome o Edge en escritorio). En su lugar puedes pegar una captura de pantalla.
#000000rgb(0, 0, 0)hsl(0, 0%, 0%)cmyk(0%, 0%, 0%, 100%)Cómo usar Selector de color de imagen
- Añade una imagen: suéltala en el recuadro, pega una captura de pantalla con Ctrl+V o haz clic en Elegir imagen. Se carga una imagen de ejemplo para que puedas probarlo enseguida.
- Muévete sobre la imagen: la lupa muestra ampliados los píxeles bajo el cursor. En un teléfono, toca y desliza el dedo, y levántalo para elegir.
- Haz clic para elegir un color. Sus códigos HEX, RGB, HSL y CMYK aparecen a la derecha; pulsa Copiar junto al formato que necesites.
- Extrae una paleta: elige cuántos colores (de 5 a 10) y la herramienta agrupa los píxeles similares para encontrar los colores dominantes y su proporción en la imagen.
- Reutiliza colores: haz clic en una muestra del historial o de la paleta para volver a cargarla, o descarga la paleta como PNG.
Formatos de código de color explicados
Cada píxel de una pantalla es una mezcla de luz roja, verde y azul, cada una guardada como un número de 0 a 255. El mismo color se puede escribir en varias notaciones:
| Formato | Ejemplo | Dónde se usa |
|---|---|---|
| HEX | #FF6347 | CSS, HTML, Figma, Canva, la mayoría de las herramientas de diseño |
| RGB | rgb(255, 99, 71) | CSS, editores de imágenes, programación |
| HSL | hsl(9, 100%, 64%) | CSS; facilita crear variantes más claras, más oscuras o menos saturadas |
| CMYK | cmyk(0%, 61%, 72%, 0%) | Diseño para impresión (una conversión simple; las imprentas usan perfiles de color) |
Cómo convertir entre formatos
De RGB a HEX: escribe cada canal como dos dígitos hexadecimales. 255 = FF, 99 = 63, 71 = 47, así que rgb(255, 99, 71) = #FF6347.
De RGB a HSL: escala cada canal a 0–1 (r = 1, g = 0.388, b = 0.278). Máx. = 1 y mín. = 0.278, así que la luminosidad L = (máx. + mín.) / 2 = 0.639 = 64%. La diferencia d = 0.722, la saturación S = d / (1 − |2L − 1|) = 0.722 / 0.722 = 100%. Como el rojo es el canal mayor, el tono H = 60 × ((g − b) / d) = 60 × 0.153 ≈ 9°.
De RGB a CMYK: K = 1 − máx(r, g, b); luego C = (1 − r − K) / (1 − K), y lo mismo para M e Y. Para #FF6347 da C 0%, M 61%, Y 72%, K 0%.
Consejos para elegir colores precisos
- Usa el promedio en fotos. La compresión JPEG y el ruido del sensor hacen que los píxeles vecinos difieran. Una muestra de 3×3 o 5×5 da el color típico de una zona en lugar de un píxel suelto.
- Elige del archivo original, no de una captura de pantalla de una vista previa reducida. Las capturas de páginas web pueden tener gestión de color o estar escaladas, lo que altera los píxeles de los bordes.
- Evita los bordes y el texto. El suavizado (antialiasing) mezcla el primer plano con el fondo, así que los píxeles de los bordes tienen un color intermedio.
- Usa la paleta para los colores de marca. Los colores dominantes de un logo o una foto de producto son un punto de partida rápido para un sitio web o un tema de diapositivas a juego.
- Comprueba el contraste antes de usar los colores elegidos para texto: el texto oscuro sobre un fondo claro elegido debe alcanzar una relación de contraste de al menos 4.5:1.
Preguntas frecuentes
¿Cómo obtengo el código de color de una imagen?
Abre la imagen en esta herramienta y haz clic en el píxel que quieras. El código HEX exacto (como #3A7BD5), los valores RGB y los valores HSL aparecen al instante, cada uno con un botón para copiar.
¿Por qué el color elegido es un poco distinto de lo que esperaba?
Las fotos tienen ruido y artefactos de compresión, así que los píxeles vecinos suelen diferir en unos pocos valores. Ajusta el Tamaño de muestra a 3×3 o 5×5 para promediar la zona alrededor del cursor, lo que da un color más representativo.
¿Cómo funciona la extracción de la paleta?
La imagen se reduce y sus píxeles se agrupan con el algoritmo de agrupamiento k-means: cada píxel se asigna al más cercano de k colores, y cada color se mueve al promedio de sus píxeles hasta que los grupos dejan de cambiar. Los colores resultantes se ordenan según la parte de la imagen que cubren.
¿Puedo elegir un color fuera de la imagen, como de otra app o sitio web?
Sí, en los navegadores compatibles con la EyeDropper API (Chrome y Edge en escritorio). Pulsa Elegir de la pantalla y haz clic en cualquier parte de tu pantalla. En otros navegadores, haz una captura de pantalla y pégala aquí.
¿Se sube mi imagen?
No. La imagen se lee y se analiza completamente en tu navegador con JavaScript. No se envía nada a ningún servidor.
¿Cuál es la diferencia entre HEX, RGB y HSL?
Describen el mismo color de formas distintas. RGB da las cantidades de rojo, verde y azul de 0 a 255. HEX escribe esos mismos tres números en base 16, por ejemplo rgb(255, 99, 71) = #FF6347. HSL describe el tono (de 0 a 360 grados), la saturación y la luminosidad en porcentaje, lo que resulta práctico para crear variantes más claras u oscuras.
¿Funciona con PNG transparentes?
Sí. Las zonas transparentes se muestran sobre un fondo de cuadros, y los valores de color se indican para los canales RGB del píxel junto con su alfa. Los píxeles totalmente transparentes se ignoran al extraer la paleta.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.