Reconstruir un diseño en código
Toma el color de un botón desde la captura del diseño y pega el HEX directo en el CSS.
Guide
“Cuentagotas de color” saca de una imagen el color exacto. Al mover el ratón, una lupa circular de 120 px sigue al cursor y amplía los 15×15 píxeles de alrededor con la celda central resaltada, para no pinchar en el sitio equivocado cuando hay un degradado o un borde. Al hacer clic, el valor pasa a “Color actual” y el HEX se copia solo, con las formas rgb() y hsl() a la vista. Al cargar la imagen también se reduce a 128 px de ancho y se agrupa por colores para obtener 8 tonos dominantes dibujados como una banda cuyo ancho sigue la proporción de píxeles. Todo el proceso es local en el navegador.
Actualizado el 2026-09-093 min read
“Cuentagotas de color” saca de una imagen el color exacto. Al mover el ratón, una lupa circular de 120 px sigue al cursor y amplía los 15×15 píxeles de alrededor con la celda central resaltada, para no pinchar en el sitio equivocado cuando hay un degradado o un borde. Al hacer clic, el valor pasa a “Color actual” y el HEX se copia solo, con las formas rgb() y hsl() a la vista. Al cargar la imagen también se reduce a 128 px de ancho y se agrupa por colores para obtener 8 tonos dominantes dibujados como una banda cuyo ancho sigue la proporción de píxeles. Todo el proceso es local en el navegador.
A diferencia de “Herramientas de color”, aquí el color sale de los píxeles de una imagen; y a diferencia de “Histograma de imagen”, lo que importa es el valor concreto y no el reparto de luces y sombras.
El HEX va directo al portapapeles
Los 8 colores dominantes salen de una miniatura de 128 px
Los píxeles diminutos se fusionan y la muestra queda algo promediada
Clic en el cielo de la imagenHEX `#4A90D9`, `rgb(74, 144, 217)`, `hsl(211, 65%, 57%)`Carga un cartel de marcaLa franja más ancha de la banda es el color principal del cartel y el resto va por áreaUna imagen grande con 6000 px de lado mayorEl lienzo de muestreo se reduce a 2048 pxToma el color de un botón desde la captura del diseño y pega el HEX directo en el CSS.
Carga el cartel de la competencia y mira cómo se reparten los 8 dominantes para entender su proporción de color.
Saca el color principal y el secundario del logo de la empresa y llévalos al tema de las diapositivas.
Amplía hasta un solo píxel para confirmar si una zona es negro puro #000000 o un gris oscuro.
La compresión JPEG, los perfiles de color y cualquier reescalado desplazan los valores entre 1 y 3 unidades; lo más fiable es partir del PNG original y muestrear en una zona de color plano.
No, solo se lee RGB; en un PNG con fondo transparente obtendrás el color con el que se compone sobre el lienzo.
La paleta se agrupa por cantidad de píxeles, así que un acento muy pequeño se fusiona; pincha en él directamente con la lupa.
La imagen se dibuja en un canvas dentro de tu navegador para tomar las muestras y no se sube a ningún servidor; el portapapeles solo se toca cuando haces clic.
Actualizado el 2026-09-09
Muestreo preciso con lupa (HEX/RGB/HSL) y extracción automática de la paleta dominante
Esta herramienta no está traducida por completo; parte del contenido usa el idioma de origen o uno de reserva.