El mundo digital traduce los colores que nos rodean en simples combinaciones de letras y números. Para hacerte con cualquier color que te guste, solo tienes que conseguir su código, y podrás replicarlo.

¿Te ha llamado la atención un color específico mientras navegas por la web? ¿O necesita usar un tono particular en su diseño para mantener las cosas consistentes? Aquí le mostramos cómo obtener el código RGB o HEX de cualquier píxel en su pantalla.

Identifique el valor RGB o HEX del color en la pantalla

Identificar el valor RGB o HEX de un color en su pantalla no requiere un ojo experto o una herramienta costosa. En la PC, hay varias formas fáciles de obtener su código de color.

Usar una aplicación para PC

La primera forma de captar cualquier color de su pantalla es usando una aplicación de computadora. Es posible que ya tenga esta aplicación en su PC.

Cuentagotas instantáneo para Windows

Si necesita agarrar códigos de color con frecuencia, tener una herramienta simple a mano le facilitará la vida. Instant Eyedropper es una aplicación gratuita exclusiva para Windows a partir de ahora.

Una vez que lo instale, podrá acceder a él desde la bandeja del sistema. Simplemente presione y mantenga presionado el botón izquierdo del mouse en el color de su elección, luego suéltelo. La aplicación copiará instantáneamente el código de color en su portapapeles y podrá pegarlo en el programa que desee. Instant Eyedropper funciona en Windows XP-10.

Medidor de color digital para Mac

Digital Color Meter es una herramienta similar preinstalada en dispositivos Mac. Abra su carpeta Aplicaciones y busque Utilidades. La herramienta Medidor de color digital debería estar allí.

Al ejecutar esta aplicación, su cursor se convertirá en un cuentagotas que puede usar para seleccionar cualquier color de su pantalla. La aplicación mostrará los valores RGB de forma predeterminada. Puede copiarlos y convertirlos en HEX más tarde o modificar las opciones para obtener el color exacto que desea.

SIP para Mac

Si necesita una herramienta más avanzada, puede consultar SIP, disponible para Mac. SIP es más que un selector de color. También ofrece una gran cantidad de funciones avanzadas que cualquier diseñador web apreciará. Puede editar sus colores fácilmente, organizarlos en paletas y cambiar sus formatos para satisfacer sus necesidades.

Desafortunadamente, SIP no es una herramienta gratuita, pero ofrecen una prueba gratuita. Puede probarlo para ver si las características adicionales valen su dinero.

La ventaja de estas aplicaciones de escritorio es que pueden captar colores de prácticamente cualquier parte de la pantalla. Las herramientas del navegador a continuación solo pueden hacer eso dentro de las páginas web. Por supuesto, puede eludir esta restricción cargando una foto o una captura de pantalla para verla en su navegador.

Usa tu navegador

La siguiente forma sencilla de obtener el color del código RGB o HEX es simplemente usar las herramientas integradas de su navegador. Solo podrá elegir colores de la página web en cuestión, pero puede usar tanto Firefox como Chrome para esto.

Aquí es donde encontrar la herramienta de selección de color de Firefox:

  1. Inicie Firefox y abra el sitio web donde desea extraer un código de color.
  2. Haga clic en el menú de su navegador (tres líneas horizontales) en la esquina superior derecha.
  3. Encuentra las herramientas de desarrollo web entre las opciones. Podría estar en "Más herramientas".
  4. Se abrirá una ventana en la parte inferior de la página. Busque el icono del cuentagotas y podrá copiar los códigos de color con un clic.

Los pasos son similares en Chrome:

  1. Inicie Chrome y abra el sitio web que desee.
  2. Haga clic en el menú (tres puntos verticales) en la esquina superior derecha y busque "Herramientas para desarrolladores" en "Más herramientas".
  3. Se abrirá una ventana en el lado derecho de la página. Busque y haga clic en "Estilos" en la segunda sección.
  4. Debajo de "cuerpo", verá un montón de cuadros de colores. Haga clic en cualquiera de ellos para activar el selector de color.

Sugerencia: también puede abrir las herramientas para desarrolladores en ambos navegadores haciendo clic derecho en cualquier página y seleccionando "Inspeccionar".

Usar una extensión de navegador

Además de las herramientas de desarrollo, también puede usar prácticas extensiones de navegador para elegir cualquier color de una página web. Echa un vistazo a las siguientes extensiones que hacen el trabajo:

  • ColorZilla
  • Cuentagotas ColorPick
  • Cuentagotas

usar un sitio web

No necesariamente necesita una aplicación o una extensión para identificar el código RGB o HEX para un color. Si tiene una imagen específica de la que desea obtener un color, también puede usar un sitio web. Innumerables sitios web le permiten cargar una foto, extraer un código de color o incluso generar una paleta armoniosa.

Selector de color de imagen de PineTools

Busque la herramienta Selector de color de imagen en el sitio web de PineTools y cargue su imagen. Acérquese si es necesario para encontrar el píxel que desea capturar. Obtendrá los valores RGB y el código HEX con un simple clic.

Selector de color de imagen

El sitio web Image Color Picker ofrece varias otras opciones además de la carga de imágenes. Haga clic en "Usar su imagen" y elija dónde desea importar una imagen. Puede hacer clic en cualquier parte de la imagen para obtener un color específico, pero el sitio web también sugiere una paleta de colores basada en la imagen.

Buscador de color de imagen

Además de un simple selector de color, Image Color Finder también puede funcionar como una herramienta creativa. Puede pixelar la imagen cargada para obtener una mejor visión general de sus colores y hacer zoom tanto como desee. El sitio también sugiere automáticamente un par de colores.

Tomar una captura de pantalla

Finalmente, puede identificar el código de color sin todas las herramientas mencionadas anteriormente. En su lugar, tomará una captura de pantalla y elegirá el color desde allí.

  1. Asegúrese de que el color que desea elegir esté visible en su pantalla.
  2. Tome una captura de pantalla presionando el botón Imprimir pantalla de su teclado (PrntScr, PrtScn, etc.) en Windows o presionando y manteniendo presionado "Shift + Command + 3" al mismo tiempo en Mac. Su captura de pantalla se copiará automáticamente en su portapapeles.

    Sugerencia: también puede capturar solo una parte de su pantalla. En Windows, abra la Herramienta de recorte desde el menú Inicio. En Mac, use el atajo "Shift + Command + 4".
  3. Abra MS Paint (o cualquier otra aplicación de procesamiento de imágenes) y pegue la captura de pantalla.
  4. Encuentra la herramienta cuentagotas y elige un color.
  5. Haga clic en "Editar colores" junto a la paleta de colores en MS Paint. Debajo del control deslizante, verá los valores RGB de su color actual.
    Para convertir estos números en un código HEX, necesitará la ayuda de un sitio web.
  6. Dirígete a RGB a HEX e ingresa los valores en los campos apropiados.
  7. Haga clic en "Convertir a hexadecimal" y obtendrá su código.

Preguntas frecuentes adicionales

¿Cuál es la diferencia entre RGB y HEX? ¿Cuál necesito?

Los códigos RGB y HEX expresan los mismos colores. Sin embargo, el código que necesitará depende de su uso previsto. Los códigos RGB le indican a su pantalla cuánta luz roja, verde y azul debe emitir para producir el color deseado. Los códigos HEX transmiten la misma información pero en el lenguaje de codificación.

Lo más probable es que un diseñador o desarrollador necesite los códigos HEX de colores.

¿Cómo identifico un color en un dispositivo móvil?

Para elegir un color de la pantalla de su dispositivo móvil, puede descargar una aplicación o usar uno de los sitios web mencionados anteriormente. También hay una herramienta Selector de color para iOS dentro de la herramienta Marcado. También puede darte el código HEX de color.

Obtenga cualquier color que vea con solo un clic

El uso de los códigos de color RGB o HEX garantiza que no haya posibilidad de error. Gracias a estos lenguajes de color universales, puede mantener la coherencia de sus diseños con los mismos tonos. Dado que hay muchas formas de extraer el código de color en la pantalla, solo necesita encontrar el método más fácil para usted.

¿Qué herramienta de selección de color prefieres? ¿O tienes otro método confiable para agregar? Háganos saber a continuación.