Cómo elegir un color exacto de una imagen: HEX, RGB y HSL

Para obtener el color exacto de una imagen, lee el valor de un píxel en lugar de estimarlo a ojo. Abre la imagen en el selector de color, pasa el cursor sobre el punto, haz clic y copia el código HEX. La lectura es el valor almacenado de ese píxel, así que se mantiene igual cada vez que eliges el mismo punto del mismo archivo.

Selector de color de imagenNecesito el código exacto del colorÚsalo gratis

Qué guarda un píxel

Cada píxel es un pequeño cuadrado de color. En una pantalla o en un archivo de imagen, se guarda como tres números, para el rojo, el verde y el azul, cada uno de 0 a 255. El rojo puro es 255, 0, 0. Esos tres números contienen la misma información en cualquier formato, así que un mismo color se puede escribir de varias maneras.

HEX, RGB y HSL

• HEX escribe cada número en hexadecimal, con dos caracteres por canal. #FF0000 es el rojo puro. Las páginas web, el CSS y la mayoría de herramientas de diseño lo usan.
• RGB escribe los mismos números en decimal, como rgb(255, 0, 0). Es el mismo color que el código HEX.
• HSL describe el color tal como lo hablamos las personas. El tono es el ángulo en la rueda de colores, la saturación indica cuán intenso es el color y la luminosidad, cuán claro u oscuro es. hsl(0, 100%, 50%) es el rojo puro.

Usa HEX cuando pegues un color en código, RGB cuando una herramienta lo pida y HSL cuando quieras una versión más clara u oscura del mismo tono. Cambiar solo la luminosidad en HSL mantiene el tono, algo más difícil de hacer a mano con HEX. Para comprobar el contraste entre dos colores, consulta HEX, RGB, HSL, CMYK y contraste.

Este es un color usado en una hoja de estilos:

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

Por qué el código puede no coincidir con la pantalla

• La imagen está comprimida. JPEG ahorra espacio suavizando los detalles finos, así que los píxeles cercanos a un borde pueden diferir ligeramente del color que ves en el centro de una zona.
• Los bordes se mezclan. Donde se juntan dos colores, los píxeles intermedios son mezclas. No son un color por sí mismos.
• Los perfiles de color varían. El selector lee los valores que decodifica el navegador, que están en sRGB. Una foto guardada con un perfil de gama amplia puede verse distinta en otros programas.
• El escalado mezcla píxeles. Una captura tomada con una pantalla a escala puede tener píxeles mezclados. Haz la captura a tamaño completo cuando sea posible.
• Las imágenes muy grandes se leen desde una copia. Las imágenes con más de 6000 píxeles en su lado más largo se leen desde una copia de 6000 píxeles, así que un píxel puede diferir un poco del archivo a tamaño completo.

Elige desde el centro de una zona plana

Busca una región de un solo color y muévete hacia su centro. La lupa muestra los 11 por 11 píxeles alrededor del cursor, así que puedes ver si el punto está mezclado o es uniforme. Con el teclado, mueve la mira un píxel cada vez con las flechas, o diez con Mayús, y pulsa Enter para elegir. Revisa la lectura antes de copiarla.

Usa la paleta para crear un esquema

Una foto rara vez tiene un solo color que te interese. La paleta muestra hasta seis de sus colores principales. Funciona redondeando cada píxel a 16 niveles por canal, contando los grupos y quedándose con los grupos más frecuentes que sean distintos entre sí. Cada muestra muestra el promedio de su grupo. Toca una muestra para copiar su código HEX. Considera la paleta como un punto de partida, porque es un promedio y no un color de marca medido.

Convertir entre formatos

Si una herramienta de diseño pide otro formato, pega el código HEX en un convertidor de colores. Convierte entre HEX, RGB y HSL sin cambiar el color, así que el resultado coincide con el código que elegiste.

Últimas selecciones y privacidad

La herramienta guarda tus últimas selecciones en la página para que puedas compararlas. Solo existen en la memoria de esta pestaña y desaparecen al cerrarla. La imagen se lee dentro de tu navegador y nunca se envía a ningún servidor.

Cómo hacerlo con fixmint

1. Abre el selector de color de imagen y suelta la foto.
2. Pasa el cursor sobre el punto. O selecciona la imagen y usa las flechas para mover la mira un píxel cada vez, manteniendo Mayús para moverte diez píxeles.
3. Haz clic, o pulsa Enter, para elegir el color. Revisa la lectura antes de copiarla.
4. Usa el botón Copiar junto a HEX, RGB o HSL para copiar el valor que necesitas.
5. Si una herramienta de diseño pide otro formato, pega el valor en el convertidor de colores.

Respuestas rápidas

¿Por qué el color se ve distinto en mi pantalla? Tu pantalla muestra una versión del archivo con gestión de color y escalada. Elige desde el centro de una zona uniforme y compara el código HEX con una muestra conocida.

¿Qué formato debo copiar? HEX para páginas web y la mayoría de herramientas de diseño. Usa RGB o HSL cuando una herramienta lo pida.

¿La herramienta sube mi imagen? No. La imagen se decodifica y se lee dentro de tu navegador.