Selector de color de imagen: HEX, RGB, HSL y paleta

Cada píxel de una imagen digital guarda un color como tres números: rojo, verde y azul. Un selector de color lee esos números en el punto que eliges y los muestra en los formatos que usan diseñadores y desarrolladores. Así es fácil reutilizar un tono exacto de una foto, un logo o una captura de pantalla en lugar de adivinarlo a ojo.

El ojo se deja engañar fácilmente por los colores de alrededor y el brillo de la pantalla, así que dos tonos que se ven iguales pueden ser bastante distintos en código. Tomar el color del archivo mismo elimina las suposiciones.

Tres formas de escribir un color

Al elegir entre HEX vs. RGB vs. HSL, recuerda que describen el mismo color. HEX es un código compacto de seis caracteres que se usa en diseño web y en la mayoría de las herramientas de diseño. RGB indica los valores de rojo, verde y azul de 0 a 255. HSL describe el tono, la saturación y la luminosidad, el formato más fácil para aclarar u oscurecer un color en CSS sin cambiar su carácter.

Agrega una imagen arrastrándola al recuadro, buscándola o pegando una captura de pantalla. Pasa el cursor sobre la imagen: el color que está debajo se muestra en vivo más abajo. Haz clic para tomarlo. El color elegido aparece con una muestra grande y sus códigos HEX, RGB y HSL, cada uno con su propio botón para copiar.

Cada color que eliges se agrega a un historial corto, así que puedes juntar varios colores de una imagen y copiarlos después. Haz clic en cualquier muestra del historial para volver a ver sus códigos.

Cómo copiar un código

Para obtener rápido el código HEX de una imagen, acerca el zoom del navegador si la zona es pequeña, haz clic en el píxel exacto y presiona Copiar HEX. El código empieza con el signo de número y funciona directamente en CSS, Figma, Canva y la mayoría de las herramientas.

En cuanto agregas una imagen, la herramienta analiza una copia pequeña y encuentra sus colores dominantes con un método de agrupamiento. Aparecen hasta ocho colores, ordenados según cuánto de la imagen cubren. Haz clic en cualquiera para ver sus códigos completos, o copia todo el conjunto como una lista de valores HEX o como propiedades personalizadas de CSS listas para pegar en una hoja de estilos.

Un generador de paletas a partir de una foto es una forma rápida de crear un esquema de color que ya se ve armonioso, porque los colores vienen de una escena real: un atardecer, un bosque o una habitación bien diseñada.

Cómo trabajar con logotipos

Para encontrar los colores de marca de un logo, usa el archivo original y no una captura de pantalla o una copia comprimida, que pueden alterar un poco los colores. Toma los colores de las zonas planas del logo y no de los bordes, donde se mezclan con el fondo.

Chrome, Edge y otros navegadores Chromium para computadora tienen un cuentagotas de pantalla. Presiona Tomar un color de cualquier parte de la pantalla y el cursor se convierte en una lupa que puedes mover sobre cualquier ventana, incluidas otras apps. Haz clic para tomar el color o presiona Escape para cancelar. Es un selector de color de pantalla muy práctico cuando el color que necesitas está en un video, una app de diseño o un sitio web.

Firefox y Safari todavía no tienen esta función, así que ahí el botón está oculto y puedes tomar el color de una imagen que subas. En el celular, usa una captura de pantalla: tómala y luego pégala o elígela aquí.

Fotos vs. gráficos planos

Las fotos tienen ruido y degradados, así que los píxeles vecinos pueden variar un poco. Para un color representativo de una foto, la paleta suele ser mejor que un solo píxel, porque promedia píxeles parecidos. Para logotipos y gráficos planos, un solo clic es exacto.

Perfiles de color y pantallas

Los códigos salen de los datos de la imagen tal como los decodifica tu navegador. Las imágenes de gama muy amplia pueden verse un poco distintas en distintas pantallas, pero los códigos son lo que necesitas para reproducir el color en herramientas web y de diseño.

Imágenes comprimidas

Los JPEG muy comprimidos crean artefactos en bloques alrededor de los bordes. Toma el color del centro de una zona plana, o usa una versión de mejor calidad de la imagen si la tienes.

Tu imagen se queda en la memoria del navegador; no se sube, registra ni guarda nada. Admite archivos JPG, PNG, WebP, GIF y BMP, y las zonas transparentes se ignoran al crear la paleta.

La herramienta es gratis e ilimitada, no agrega marca de agua y no usa créditos de EnhancerPro. Si quieres convertir una paleta en un logo o un ícono, nuestro generador de favicon y el conversor de imagen a SVG son buenos siguientes pasos.

Cómo usar los colores en CSS

Pega los códigos HEX directamente en las propiedades de color, o copia la paleta como variables CSS y úsalas con var(--color-1). Los valores HSL facilitan crear tonos más claros subiendo el porcentaje de luminosidad.

Parte de un color fuerte

La mayoría de los buenos esquemas parten de un solo color principal, muchas veces tomado de un logo o de una foto clave. Tómalo aquí y luego decide un neutro claro y uno oscuro para fondos y texto. Con HSL es fácil: conserva el tono y la saturación, y sube la luminosidad para un fondo claro o bájala para un acento profundo.

Colores de apoyo a partir de la paleta

La paleta extraída suele tener uno o dos colores vivos y varios apagados. Los apagados funcionan bien para fondos, bordes y botones secundarios, y los vivos para llamadas a la acción y elementos destacados. Como vienen de la misma imagen, suelen combinar con naturalidad.

Revisa el contraste

El texto tiene que ser legible para todos. Texto oscuro sobre un tono claro, o texto blanco sobre un color profundo, suele funcionar. Revisa las combinaciones importantes con un verificador de contraste antes de publicar, sobre todo en botones y texto pequeño. Un color que se ve intenso en una foto puede ser demasiado claro para texto sobre una página blanca.

Lleva un registro

Guarda los códigos finales en una guía de estilo o como variables CSS. Copiar la paleta como propiedades personalizadas de CSS te da un punto de partida que puedes renombrar, por ejemplo principal, acento y superficie, para que todas las páginas de tu sitio usen exactamente los mismos tonos.

Colores para impresión

Los colores de pantalla usan RGB, y las impresoras usan tintas CMYK. Los códigos de aquí son perfectos para pantallas; para material impreso, pide a tu imprenta que los convierta o que los iguale con una muestra impresa, porque algunos colores brillantes de pantalla no se pueden imprimir exactamente.

Cómo compartir colores con un equipo

Diseñadores, desarrolladores y clientes suelen describir los colores de formas distintas: un código hexadecimal en un archivo de diseño, un valor RGB en una presentación, un valor HSL en una hoja de estilos. Copiar los tres de la misma selección evita las pequeñas diferencias que aparecen al convertir valores a mano. Pega los códigos en las notas del proyecto junto con la imagen de origen, para que cualquiera vea de dónde salió cada color y pueda volver a tomarlo si hay que ajustar la paleta.

Paletas por temporada y por ambiente

Las fotos son una gran fuente de ambiente. Las hojas cálidas de otoño dan naranjas y rojos profundos, una playa da neutros arena y turquesa, y una ciudad de noche da azules profundos con acentos de neón. Prueba extraer paletas de varias imágenes que transmitan la sensación que buscas y quédate con los colores que se repiten. Ese conjunto repetido suele convertirse en un esquema sólido y coherente.