Extraer colores de marca de un mockup o captura web
¿Te gusta una paleta o visual de marca? Sube una captura, haz clic en el bloque clave y obtén el HEX exacto para tu diseño o código.
Haz clic o arrastra en cualquier punto de la imagen para tomar un color
HEX
RGB
HSL
Historial de tomas
Los colores que tomes de la imagen se listarán aquí para revisarlos y compararlos
Camino corto
Camino más corto · tomar color de una imagen
Sin instalar software: todo en la página, con lupa para posicionar con precisión.
-
1
Sube la imagen
Haz clic o arrástrala. Admite JPG, PNG, WebP y GIF, hasta 20MB; una por vez.
-
2
Mueve el ratón o el dedo para posicionar
Al mover el cursor, la lupa amplía los píxeles cercanos y el cuadro rojo marca el punto que se tomará.
-
3
Haz clic para tomar el color
Haz clic o suelta el dedo en el punto deseado: verás al instante HEX, RGB y HSL.
-
4
Copia el valor del color
Pulsa copiar junto al formato que necesites y pégalo donde lo uses.
Si algo falla
¿El selector de color admite procesamiento por lotes?
Es una herramienta interactiva para leer el color de un píxel: no genera archivo exportado, así que no hay «lote». Aunque la imagen sea grande, tomas colores punto a punto. Solo admite una imagen; no hay modo por lotes.
¿La toma de color se hace en mi dispositivo o se sube a un servidor?
Todo ocurre en el navegador. Con Canvas se lee el valor del píxel directamente de los datos de la imagen; el original no se sube a ningún servidor.
¿Por qué el color de la lupa puede diferir un poco del color tomado?
La lupa muestra un área ampliada alrededor del cursor; el color tomado es el del píxel marcado por el cuadro rojo. Con degradados o ruido, los vecinos pueden variar ligeramente: si haces clic según el píxel del cuadro rojo, el valor es exacto.
¿Se guarda el historial de colores? ¿Sigue tras refrescar?
El historial solo vive en la memoria de la página actual, para comparar varios colores en la misma sesión. Al refrescar o cerrar se borra; no se guarda ni se sube. Si necesitas un color a largo plazo, cópialo a tus notas o herramienta de diseño.
¿Qué formato usar: HEX, RGB o HSL?
HEX (p. ej. #FF3B30) es el más habitual en web y en muchas herramientas de diseño. RGB (p. ej. rgb(255, 59, 48)) conviene si quieres ver o ajustar canales por separado. HSL (p. ej. hsl(4, 100%, 59%)) describe tono, saturación y luminosidad, útil para variar sombra o saturación manteniendo el tono. Los tres son el mismo color: elige el que pida tu herramienta o código.
¿Qué precisión tiene? ¿Lee el color original real?
Sí. Lee los píxeles decodificados de la imagen, sin importar el tamaño en pantalla: aunque se vea más pequeña, la toma sigue la resolución real, sin sesgo por el escalado de visualización.
-
El original no llega a nuestros servidores
La toma de color y la lectura de píxeles ocurren en el navegador; la imagen no pasa por ningún servidor
-
Lupa para posicionar con precisión
Al pasar el cursor se amplían los píxeles cercanos; el cuadro rojo marca el píxel que se tomará
-
Tres formatos, copia en un clic
HEX, RGB y HSL a la vez: copia y pega en diseño o código
-
Sin cuenta, úsalo las veces que quieras
Sin registro, sin pago ni límites ocultos de uso
Situaciones
En estos casos suele compensar abrir esta página
No es una lista de funciones, sino «cuándo vale la pena arrastrar una imagen aquí». Si no encaja, cambia de herramienta.
Extraer tonos naturales de una foto para una paleta
Saca del cielo, la piel o la vegetación de una foto de paisaje o retrato una base de referencia para un esquema o ilustración.
Comprobar que el desarrollo coincide con los colores del diseño
Al implementar, toma color en la captura del diseño y en la página real y compara HEX: confirmas la fidelidad sin adivinar a ojo.
Formatos de color
Tabla rápida HEX, RGB y HSL
Tres formas de describir el mismo color: elige la que coincida con donde lo vas a pegar.
| Formato | Ejemplo | Uso habitual |
|---|---|---|
| HEX | #FF3B30 | CSS web y campos de color en la mayoría de herramientas de diseño (p. ej. Figma, Photoshop) |
| RGB | rgb(255, 59, 48) | Cuando necesitas ver o ajustar por separado rojo, verde y azul |
| HSL | hsl(4, 100%, 59%) | Por tono, saturación y luminosidad: útil para variar sombra o saturación en el mismo tono |
Los tres formatos describen exactamente el mismo color con distinta representación numérica. En la página cada uno se copia en un clic: pégalo en tu herramienta de diseño o editor de código.
Notas técnicas
Dos cosas útiles sobre la toma de color local
-
01
Lee el píxel a la resolución real de la imagen
La imagen se decodifica y se dibuja en un lienzo de la misma resolución que el original; en la página solo se ve reducido. Al hacer clic, la posición en pantalla se convierte a coordenadas reales del lienzo, así la precisión sigue la resolución original aunque la vista sea pequeña.
-
02
Por qué no hay lotes ni archivo descargable
La función es «hacer clic y leer el color de un píxel»: es solo consulta interactiva, no genera imagen descargable ni un lote de resultados. Para varias imágenes, súbelas una a una; al cambiar de imagen se vacía el historial actual.
El archivo sigue en tu lado — arrastra uno y prueba
Sin cuenta. Si te gusta, sigue; si no, cambia parámetros y vuelve a intentar.