Extraer de la imagen
Suelta la imagen aquí, pégala (Ctrl+V) o
Colores recientes
Color Picker Hex & Image Extractor
Un fin de semana me pasé demasiado tiempo intentando hacer coincidir un color morado del logotipo de un cliente en Figma, sólo para darme cuenta de que el código hexadecimal que había estado copiando y pegando estaba ligeramente desviado porque lo había tomado de una captura de pantalla JPEG comprimida en lugar del archivo original. La diferencia entre #895BF5 y #8B5CF6 es básicamente invisible en la pantalla a menos que los pongas uno al lado del otro sobre un fondo blanco, y entonces es increíblemente obvio y molesto. Ese es el tipo de cosas que me hizo querer un selector de color que sólo hace todo en un solo lugar - agarrar el color, verlo en todos los formatos, comprobar cómo se ve contra el texto, hecho. Utiliza el de arriba, elige tu color o introduce una imagen, y tendrás HEX, RGB, HSL, HSV y CMYK en un solo paso.
Qué hay aquí
El selector principal te ofrece una almohadilla de saturación-brillo con un deslizador de tono debajo, que es bastante estándar, pero la parte que más utilizo es la extracción de imágenes. Puedes hacer una captura de pantalla o pegarla desde el portapapeles y hacer clic en cualquier parte para obtener los colores exactos: mucho más fiable que echar un vistazo en el muestrario de colores de Photoshop, especialmente cuando trabajas a partir de una referencia fotográfica o de un activo de marca que alguien te ha enviado en formato PNG. La tira de colores recientes mantiene visibles tus últimas selecciones, lo que parece poca cosa, pero ahorra una cantidad absurda de idas y venidas cuando intentas crear una paleta desde cero.
Cada color se emite en cinco formatos: HEX, RGB, HSL, HSV y CMYK. Hay un botón “Copiar todos los formatos” si quieres tenerlo todo en el portapapeles a la vez, lo que resulta realmente útil cuando estás documentando una guía de estilo y necesitas pegar todos los valores en una hoja de cálculo o en una tabla Notion. El año pasado mantuve una hoja de Google con especificaciones de color para unos cuarenta sitios diferentes y copiar y pegar cada formato individualmente desde el selector de color DevTools de Chrome me estaba llevando a la pared, era tan tedioso para algo que debería tomar un segundo.
La sección de armonías de color genera paletas complementarias, análogas, triádicas, complementarias divididas, tetrádicas y cuadradas a partir del color que hayas elegido. Cada armonía tiene un botón “Copiar CSS” que te da el conjunto completo como propiedades personalizadas CSS. Honestamente, los modos triádico y tetrádico son los que utilizo cuando necesito un esquema de color rápido - complementario es demasiado obvio para la mayoría de los proyectos, y análogo puede parecer un poco plano a menos que deliberadamente busques un aspecto monocromático. Dicho esto, si estás construyendo algo que necesita sentirse tranquilo o cohesivo, análogo está infravalorado y funciona mejor de lo que la gente le da crédito.
También hay una tira de tonos y sombras que genera variaciones más claras y más oscuras del color seleccionado en pasos uniformes, que es el tipo de cosas que Tailwind CSS hace automáticamente con sus escalas de color, pero que de otro modo tendrías que calcular manualmente ajustando el valor de luminosidad en HSL. La previsualización del contraste en la parte superior muestra el color con texto oscuro y claro superpuesto para que puedas ver si pasará las comprobaciones de accesibilidad. No es una calculadora completa de la relación de contraste WCAG, así que si necesitas relaciones exactas para el cumplimiento, necesitarás un comprobador de contraste específico para ello. Pero para una comprobación rápida mientras eliges los colores de la marca o los acentos de la interfaz de usuario, es suficiente.
Una cosa que voy a mencionar acerca de los valores CMYK: se calculan a partir de RGB, lo que significa que son aproximaciones. Si usted está realmente enviando algo a una impresora comercial - tarjetas de visita, embalaje, lo que sea - que necesita para trabajar en un perfil de color CMYK adecuada en InDesign o Illustrator, no la conversión de colores de la pantalla. La salida CMYK aquí está bien para tener una idea aproximada de cómo se ve un color en términos de impresión, y es lo suficientemente cerca para maquetas digitales, pero no coincidirá con una muestra Pantone. Merece la pena saberlo.
PREGUNTAS FRECUENTES
¿Cuál es la diferencia entre los formatos de color HEX, RGB y HSL?
Son tres formas de describir exactamente el mismo color. HEX es un código de seis caracteres utilizado en CSS y herramientas de diseño: #895BF5, por ejemplo. RGB divide el color en valores de los canales rojo, verde y azul de 0 a 255, que es como las pantallas representan realmente el color. HSL describe el color en términos de tono (la posición de la rueda de color, 0-360°), saturación (lo vivo que es) y luminosidad (lo brillante u oscuro que es). La mayoría de los desarrolladores web utilizan por defecto HEX porque es más compacto, pero HSL es posiblemente más intuitivo si estás tratando de ajustar un color a mano - subir la luminosidad 10% es mucho más fácil de razonar que adivinar qué canal RGB cambiar.
¿Puedo extraer los colores exactos de una imagen cargada?
Sí, suelte una imagen en el área de extracción o pegue una desde el portapapeles con Ctrl+V y, a continuación, haga clic en cualquier parte de la imagen para obtener el color de ese píxel. Ten en cuenta que si la imagen es un JPEG comprimido, los colores que selecciones pueden ser ligeramente diferentes del original debido a los artefactos de compresión. Esto se nota especialmente con degradados y colores de marca sólidos que han pasado por la compresión de las redes sociales. Para obtener resultados más precisos, utiliza un archivo PNG o un archivo fuente sin comprimir.
¿Son los valores CMYK lo suficientemente precisos para la impresión?
Son aproximaciones. Los valores CMYK se han convertido matemáticamente a partir de RGB, que es un modelo de color de pantalla; no tiene en cuenta el comportamiento de la tinta, el papel ni el perfil de color específico que utiliza la impresora. Para una referencia aproximada o una maqueta digital, están perfectamente bien. Pero si vas a enviar archivos a un impresor comercial para tarjetas de visita o envases, deberías trabajar con un perfil CMYK específico en InDesign o Illustrator, idealmente con referencias Pantone. La diferencia entre el CMYK convertido a RGB y el resultado de impresión real puede ser sorprendentemente grande, especialmente con violetas brillantes y verdes saturados que simplemente no se reproducen bien en CMYK.
¿Cómo funcionan las armonías cromáticas?
Las armonías de color se basan en las relaciones geométricas de la rueda cromática. Los complementarios emparejan dos colores directamente opuestos (como el morado y el amarillo-verde), los análogos agrupan a los vecinos en la rueda y los triádicos separan tres colores uniformemente a 120°. El cálculo se realiza en HSL: complementario sólo añade 180° al tono, triádico añade 120° y 240°, y así sucesivamente. No se trata de agrupaciones arbitrarias, sino de principios de la teoría del color que se han utilizado en pintura y diseño durante siglos. El botón “Copiar CSS” exporta la armonía completa como propiedades personalizadas para que puedas incluirlas directamente en una hoja de estilos.
¿La vista previa de contraste comprueba el cumplimiento de las normas de accesibilidad WCAG?
No del todo. La vista previa muestra el color con texto claro y oscuro superpuesto para que puedas ver de un vistazo si es legible, pero no calcula un número específico de relación de contraste. WCAG 2.1 requiere una relación mínima de 4,5:1 para el texto normal y de 3:1 para el texto grande - si necesitas verificar esos números exactos para el cumplimiento de la accesibilidad, un comprobador de relación de contraste dedicado te dará los valores precisos y un resultado de pasa/no pasa. La vista previa es más bien una comprobación rápida mientras eliges los colores, no un sustituto de una auditoría adecuada.