Support Centre

Búsqueda

Aprende a usar la herramienta Color

Gino B.
Gino B.
  • Actualización

La herramienta de color le permite  seleccionar colores  ,  personalizar sus valores claros y oscuros  ,  hacer muestras  y  seleccionar colores de marca  ,  probar colores desde su dispositivo  y más.

Aprenda a usar las funciones de la herramienta de color y haga que sus diseños cobren vida a través del color. 

Encuentra la herramienta de color en la barra de herramientas superior

El  icono  de la herramienta de color  aparece   en la barra de herramientas superior  cuando  selecciona  cualquier elemento en el lienzo de diseño  que tenga un color personalizable (esto incluye iconos, símbolos, tablas, widgets inteligentes, etc.).

 

 

El  ícono de la Herramienta de color  aparece como un cuadrado con el color del elemento y una forma de lágrima o gota en el medio:

El ícono de la herramienta de color aparece en azul claro, con una forma de lágrima azul más oscura en el centro.

Busque el icono en la  barra de herramientas superior  junto a otras herramientas de estilo para el elemento que seleccione en el lienzo, incluida la opacidad para elementos como iconos y formas, o herramientas de estilo de texto para cuadros de texto. 

La barra de herramientas superior de un diseño en el Editor de Venngage con el título 'Infografía de redes sociales'. En el menú de fuentes, el icono de la herramienta de color (de color naranja, con una forma de lágrima gris oscuro en el centro) está resaltado por un cuadro rojo oscuro y una flecha roja oscura.

Para los elementos con  bordes y relleno  , como  los widgets inteligentes  , el ícono de color aparece como un cuadrado y una imagen de borde: 

Una vista parcial de la barra de herramientas superior de un diseño en el Editor de Venngage. La segunda fila de la barra de herramientas muestra dos iconos de herramientas de color, uno al lado del otro, en el menú Alineación. Los iconos de la herramienta de color están resaltados con un cuadro rojo oscuro y una flecha azul oscuro.

La herramienta de color para  gráficos  aparece en un menú contextual especial que se utiliza para editar todos los detalles del gráfico  (incluidos los valores de datos, tipos de gráficos, leyendas y etiquetas, etc.). Para acceder a él,  haga doble clic en el gráfico  , o haga clic en el gráfico para seleccionarlo y luego haga clic en "  Editar gráfico  " en la barra de herramientas superior.

Descripción general de las funciones de la herramienta de color

Un primer plano del widget Herramienta de color, tal como aparece en el Editor de Venngage. La parte superior del widget está dominada por una rueda de colores, que representa un arcoíris de colores entre los que el usuario puede elegir, utilizando el punto selector circular para indicar de qué parte de la rueda está seleccionando un color. En este caso, el punto selector aparece en un área con un tono naranja claro. Un control deslizante junto a la rueda de color representa el valor claro/oscuro del color, con el punto selector circular que indica que el control deslizante está configurado en el valor más claro. Debajo de la rueda de color hay una barra deslizante etiquetada como "Opacidad", con el punto selector configurado en casi el nivel más alto de opacidad. Debajo de este, aparece un gran cuadrado con esquinas redondeadas, con el mismo color naranja claro que se selecciona en la rueda de colores. Este es el mosaico de color que muestra una vista previa del color que el usuario ha seleccionado. Junto al mosaico de color hay dos encabezados: uno para HEX, que es un lenguaje de codificación de colores que representa colores digitales con una cadena de seis letras y números combinados después de un signo de libra. Aquí, el naranja claro se representa como HEX #FFB458. Debajo están los valores RGB del color, que representan de manera similar el mismo color al indicar sus proporciones de rojo, verde y azul y su opacidad. R=255, G=180 y B=88, representando el naranja claro. El nivel de opacidad indicado por el control deslizante también está representado por el valor a; aquí se muestra como A=99 de una posible opacidad de 100. La sección inferior contiene dos encabezados, Brand Colors y Swatch Colors, debajo de los cuales aparecen varios mosaicos de colores pequeños. que es un lenguaje de codificación de colores que representa colores digitales con una cadena de seis letras y números combinados después de un signo de libra. Aquí, el naranja claro se representa como HEX #FFB458. Debajo están los valores RGB del color, que representan de manera similar el mismo color al indicar sus proporciones de rojo, verde y azul y su opacidad. R=255, G=180 y B=88, representando el naranja claro. El nivel de opacidad indicado por el control deslizante también está representado por el valor a; aquí se muestra como A=99 de una posible opacidad de 100. La sección inferior contiene dos encabezados, Brand Colors y Swatch Colors, debajo de los cuales aparecen varios mosaicos de colores pequeños. que es un lenguaje de codificación de colores que representa colores digitales con una cadena de seis letras y números combinados después de un signo de libra. Aquí, el naranja claro se representa como HEX #FFB458. Debajo están los valores RGB del color, que representan de manera similar el mismo color al indicar sus proporciones de rojo, verde y azul y su opacidad. R=255, G=180 y B=88, representando el naranja claro. El nivel de opacidad indicado por el control deslizante también está representado por el valor a; aquí se muestra como A=99 de una posible opacidad de 100. La sección inferior contiene dos encabezados, Brand Colors y Swatch Colors, debajo de los cuales aparecen varios mosaicos de colores pequeños. Debajo están los valores RGB del color, que representan de manera similar el mismo color al indicar sus proporciones de rojo, verde y azul y su opacidad. R=255, G=180 y B=88, representando el naranja claro. El nivel de opacidad indicado por el control deslizante también está representado por el valor a; aquí se muestra como A=99 de una posible opacidad de 100. La sección inferior contiene dos encabezados, Brand Colors y Swatch Colors, debajo de los cuales aparecen varios mosaicos de colores pequeños. Debajo están los valores RGB del color, que representan de manera similar el mismo color al indicar sus proporciones de rojo, verde y azul y su opacidad. R=255, G=180 y B=88, representando el naranja claro. El nivel de opacidad indicado por el control deslizante también está representado por el valor a; aquí se muestra como A=99 de una posible opacidad de 100. La sección inferior contiene dos encabezados, Brand Colors y Swatch Colors, debajo de los cuales aparecen varios mosaicos de colores pequeños.

El menú de colores incluye:

Encuentre el mosaico de vista previa de color

El  mosaico de vista previa  es la sección de la Herramienta de color que  le mostrará cómo se ve el color que está personalizando en tiempo real  .

A medida que usa el Selector de color, el control deslizante claro/oscuro y el control deslizante de opacidad, o los campos HEX/RGBA para ajustar un color, cambiará en el lienzo así como en el mosaico de vista   previa  .

Un primer plano del widget Herramienta de color, tal como aparece en el Editor de Venngage. La imagen se edita para que se sombree, excepto en el área donde el mosaico de vista previa de color muestra un color naranja claro. El mosaico de vista previa aparece debajo de la rueda del selector de color y el control deslizante de opacidad, a la izquierda de la sección Código HEX y valores RGBA, y encima del encabezado Colores de marca.

Vigílelo a medida que realiza los ajustes, ¡para saber cuándo obtiene el color que desea!

Seleccione y personalice un color (rueda Selector de color, control deslizante claro/oscuro)

Seleccione un  icono  ,  símbolo  ,  tabla  o  gráfico  para que aparezca la   herramienta Color  en la barra de herramientas superior. Haga clic en cualquier parte de la  rueda del selector de color  para seleccionar un color.

Un primer plano del widget Herramienta de color, tal como aparece en el Editor de Venngage. La imagen se edita para que esté sombreada, excepto en el área donde aparece la rueda del selector de color en la parte superior, a la izquierda del control deslizante de valor claro/oscuro y encima del control deslizante de opacidad.

El punto selector le mostrará el área en la que se encuentra el color que ha seleccionado, y el   mosaico de vista previa de color  le mostrará un primer plano. También verá el   cambio de color del elemento en el lienzo en tiempo real a medida que usa la herramienta de color  . 

Una vista parcial de un diseño en el editor de Venngage muestra un lienzo con un fondo azul claro y un gran número '08' en azul oscuro. Un usuario hace clic para seleccionar el 08 y aparece el icono de gota de herramienta de color en la barra de herramientas superior, entre otras herramientas para diseñar el texto. El usuario hace clic en el icono de la herramienta de color y abre el widget de la herramienta de color. El usuario hace clic en el punto selector en la rueda Selector de color, arrastrándolo desde la parte inferior izquierda del selector de color hasta la esquina superior izquierda. El mosaico de vista previa cambia de color para corresponder a donde el usuario ha movido el punto selector; el color del 08 en el lienzo de diseño también cambia a medida que el usuario mueve el punto selector. Los valores de código HEX y RGB cambian para corresponder a la selección del usuario en el selector de color.

¿ Quieres una  selección más precisa  ? Haga clic y  arrastre  el cursor mientras ajusta la posición del selector para mostrar variaciones de tono más sutiles. 

El  control deslizante  claro/oscuro  junto a la rueda de colores determina cuánto blanco o negro se agrega al color que seleccionó en la rueda. 

Una vista parcial de un diseño en el editor de Venngage muestra un lienzo con un fondo azul claro y un gran número '08' en azul oscuro. El 08 está seleccionado y el widget Herramienta de color está abierto, parcialmente superpuesto al lienzo de diseño. El usuario hace clic en el punto selector en el control deslizante de valor claro/oscuro a la derecha de la rueda del selector de color, moviéndolo hacia arriba y hacia abajo para que el color azul del 08 sea más claro o más oscuro. El mosaico de vista previa cambia de color para corresponder a donde el usuario ha movido el punto selector; el color del 08 en el lienzo de diseño también cambia a medida que el usuario mueve el punto selector. Los valores de código HEX y RGB cambian para corresponder a la selección del usuario en el control deslizante.

Cambiar la opacidad de un color

La opacidad de un color determina cuántos elementos/colores detrás de él son visibles controlando qué tan   opaco  o   transparente   es.

Un primer plano del widget Herramienta de color, tal como aparece en el Editor de Venngage. La imagen se edita para que esté sombreada, excepto en el área donde aparece la rueda del selector de color en la parte superior, a la izquierda del control deslizante de valor claro/oscuro y encima del control deslizante de opacidad.

Utilice el control deslizante con la etiqueta   "Opacidad  " para aumentar o disminuir el nivel de opacidad de un color en cualquier elemento con colores personalizables. 

Use el campo debajo del valor "  A  " (al final de la fila con RGB) para controlar la Opacidad con un número: simplemente escriba uno entre 0 y 100. Cero es más transparente y 100 es más opaco. 

Establecer la Opacidad en un valor más bajo creará un efecto  transparente   .

Una vista de primer plano de un lienzo de diseño en el Editor de Venngage. Un usuario selecciona un ícono de un solo color de una botella de jarabe con una hoja de arce. El icono es de color marrón claro y el icono de la herramienta de color en la barra de herramientas superior refleja el mismo color marrón claro. Las herramientas aparecen en la barra de herramientas superior cuando se selecciona el icono. El usuario hace clic en la herramienta % de relleno, que aparece como un menú desplegable con el símbolo de un círculo que es mitad claro, mitad oscuro. Cuando se abre el menú desplegable, el relleno se establece en 100. El usuario se desplaza hacia arriba en el menú y selecciona 70% de relleno. El ícono de la botella de jarabe ahora aparece en dos colores: el color marrón claro es el relleno mayoritario y un rojo brillante llena el 30% superior del ícono. La barra de herramientas superior ahora muestra dos íconos de herramientas de color: uno para el relleno de color marrón claro y otro para el relleno de color rojo brillante.

Ingrese el código HEX o el número RGB del color

Cambie el color de un elemento  ingresando el código HEX o los valores RGB, seleccione el elemento que desee y abra el widget de   herramienta de color haciendo clic en el icono en la barra de herramientas superior.

Un primer plano del widget Herramienta de color, tal como aparece en el Editor de Venngage. La imagen se edita para que se sombree, excepto en el área donde aparecen los campos de valor HEX y RGBA, que se encuentran debajo del control deslizante Opacidad y a la derecha del mosaico de vista previa de color.

Ingrese los caracteres del código HEX en el campo de texto debajo de "  Hex  " o los valores R, G y B en el campo debajo de cada letra para cambiar manualmente el color. Presiona 'Enter' o haz clic fuera del campo para confirmar el cambio.

Personaliza el color cambiando los valores claro/oscuro, la opacidad o incluso moviendo el selector en el Selector de color a tu tono preferido. 

Una vista parcial de un diseño en el Editor de Venngage muestra un lienzo con un fondo azul claro y un gran número '08' en azul oscuro, y una línea de puntos debajo del número en un azul más claro. Un usuario selecciona la línea punteada y abre el widget Herramienta de color en la barra de herramientas superior, luego hace clic en el campo de texto debajo de HEX que muestra el código para el color azul claro, #2A90AD. Luego, el usuario hace clic en otra pestaña de su navegador que muestra una vista parcial del generador de paleta de colores accesible de Venngage. El usuario hace clic en el botón Generar paleta aleatoria y luego selecciona un color en la fila superior, que es un rojo arándano. El usuario copia el código HEX para el rojo, que es #952547, y luego vuelve a hacer clic en el Editor de Venngage, donde vuelve a seleccionar la línea punteada y abre la Herramienta de color. El usuario hace clic en el campo de código HEX y pega el código HEX para el rojo, reemplaza el código HEX por el azul y cambia el color de la línea de puntos, que ahora se refleja en el lienzo, así como en el mosaico de vista previa de color en el widget de herramienta de color. El usuario cierra la herramienta Color.

Utilice nuestro  generador de paletas de colores  para  crear colores  y copie los códigos HEX para pegarlos directamente en la herramienta de color. Es fácil  tomar muestras de una paleta completa  para usarla en su diseño  . 

Muestree un color con la herramienta Cuentagotas

Eye Dropper  es una herramienta pequeña pero poderosa que le permite tomar muestras de color desde cualquier lugar de su dispositivo, incluido el lienzo de diseño en sí.

Un primer plano del widget Herramienta de color, tal como aparece en el Editor de Venngage. La imagen se edita para que se sombree, excepto en el área donde aparece la herramienta Cuentagotas, a la derecha del campo de código HEX. El icono de la herramienta cuentagotas también se amplía para que parezca más grande.

Seleccione el icono u otro elemento al que desee cambiar el color y abra la Herramienta de color.

Haga clic en el icono del cuentagotas en el widget de la herramienta de color y haga clic en cualquier elemento de la pantalla de su dispositivo con el color deseado. El cursor se convierte en una lupa que le permite ver de cerca el color que está eligiendo. Esto funciona en imágenes con una gran cantidad de píxeles, así como en imágenes más simples como vectores. 

En el Editor de Venngage, aparece un lienzo con un fondo azul claro y un encabezado azul oscuro con el número 08 junto al texto "¿Cuál es tu mayor dificultad cuando se trata de producir contenido atractivo?" Bajo este encabezado, aparece un gráfico de barras con cuatro barras, la parte superior de las cuales es de color rojo claro. Las tres barras debajo son todas de un color verde azulado medio. Un usuario expande el encabezado Fotos en la barra lateral izquierda e ingresa 'púrpura' en la barra de búsqueda, devolviendo varias fotos con tonos de púrpura. El usuario selecciona una de las fotos, de una lámpara LED con diferentes tonos de púrpura y magenta, y la agrega al lienzo de diseño. A continuación, el usuario hace doble clic en el gráfico de barras para abrir el menú Gráfico y hace clic en el icono de la herramienta Color junto a la fila de la hoja de cálculo que representa la barra superior de color rojo claro. El usuario hace clic en el cuentagotas en el widget de herramienta de color. El cursor del usuario se amplía, lo que hace que los píxeles sobre los que pasa sean más visibles. El usuario mueve el cursor sobre la foto de la lámpara LED púrpura y hace clic en una parte de la foto con un color azul-púrpura. La barra superior del gráfico de barras cambia a este color azul-púrpura, así como el mosaico de vista previa de color en la Herramienta de color y los valores HEX/RGB, para reflejar el cambio. El usuario cierra el widget de herramienta de color y hace clic en el lienzo de diseño, cerrando el menú Gráfico. El usuario elimina la foto de la foto LED violeta del lienzo. La barra superior del gráfico de barras cambia a este color azul-púrpura, así como el mosaico de vista previa de color en la Herramienta de color y los valores HEX/RGB, para reflejar el cambio. El usuario cierra el widget de herramienta de color y hace clic en el lienzo de diseño, cerrando el menú Gráfico. El usuario elimina la foto de la foto LED violeta del lienzo. La barra superior del gráfico de barras cambia a este color azul-púrpura, así como el mosaico de vista previa de color en la Herramienta de color y los valores HEX/RGB, para reflejar el cambio. El usuario cierra el widget de herramienta de color y hace clic en el lienzo de diseño, cerrando el menú Gráfico. El usuario elimina la foto de la foto LED violeta del lienzo.

Use el cuentagotas para  ver un color  también; simplemente seleccione el color que desee con el Cuentagotas y luego haga clic en el círculo con el  icono +  en Colores del proyecto para guardarlo como una muestra.

En el Editor de Venngage, aparece un lienzo con un fondo azul claro y un encabezado azul oscuro con el número 08 junto al texto "¿Cuál es tu mayor dificultad cuando se trata de producir contenido atractivo?" Bajo este encabezado, aparece un gráfico de barras con cuatro barras. En la esquina del diseño hay un ícono con dos marcadores de ubicación, uno rojo y otro amarillo, y una línea punteada que los conecta. Un usuario hace doble clic en el cuadro de texto alrededor del número '08' para seleccionar el texto. El usuario hace clic en el icono de la herramienta Color en la barra de herramientas superior y selecciona la herramienta cuentagotas del widget. El cursor del usuario se convierte en un círculo, que amplía los elementos en el lienzo de diseño en el Editor. El usuario mueve el cursor sobre el marcador de ubicación amarillo en el icono en la esquina inferior derecha del diseño y selecciona el color, que mueve la rueda de color en el widget de herramienta de color a ese mismo tono de amarillo, y también cambia el color del texto '08' al mismo tono de amarillo. Luego, el usuario hace clic en el signo más debajo del encabezado 'Colores de muestra' en el widget de herramienta de color, que agrega ese color amarillo a las muestras guardadas en este diseño.

Usar colores de marca o de muestra

Colores de la marca

Se puede acceder a los colores de marca  agregados a My Brand Kit  desde el menú de colores, para que pueda aplicarlos fácilmente a diferentes elementos en su diseño. Estos se encuentran debajo del mosaico de color y la sección de código HEX/RGB.

Un primer plano del widget Herramienta de color, tal como aparece en el Editor de Venngage. La imagen se edita para que esté sombreada, excepto en el área donde los colores de la marca aparecen como pequeños mosaicos de colores bajo el encabezado "Colores de la marca". Aquí, hay cinco colores de marca disponibles representados por cinco mosaicos diferentes.

 

Cambie entre diferentes colores de Brand Kit  desde "  My Brand Kit  " en la barra lateral izquierda.

También puede  aplicar  los colores de  My Brand Kit   a todos los elementos de su diseño desde la herramienta en la barra lateral izquierda. 

Aparece un diseño simple en un lienzo en el Editor de Venngage, que muestra un barco de vapor gris oscuro con un fondo rojo flotando en el agua azul oscuro y acercándose a una gran montaña azul oscuro, contra un fondo azul claro. En la barra lateral izquierda, un usuario hace clic en My Brand Kit para expandirlo y hace clic en los mosaicos debajo de 'Brand Colors' que aparecen debajo del logotipo de la marca del usuario e incluyen un azul brillante, magenta y naranja oscuro. Los colores del mosaico Brand Colors se aplican aleatoriamente a todos los elementos del lienzo de diseño, cambiando el color del agua de azul oscuro a naranja, la montaña a un azul brillante y el barco a un naranja más claro. En los mosaicos de vista previa debajo de Brand Colors, aparece un icono de reproducción aleatoria. A medida que el usuario vuelve a hacer clic en los mosaicos de colores, los colores de la marca se vuelven a aplicar a los elementos en el lienzo de diseño, pero se mezclan.

 

Cuando aparezca el icono de reproducción aleatoria sobre los colores de la marca, vuelva a hacer clic en ellos para reasignar aleatoriamente los colores a los elementos de su diseño.

Muestra un color (añádelo a Swatch Colors)

Los colores de muestra   aparecen como mosaicos en su propia sección, debajo de Colores de marca y los mosaicos de colores de marca. Estos se generan previamente de acuerdo con los colores que aparecen en la plantilla.

El  signo +   que aparece en un círculo en la parte inferior de la última fila de Swatch Colors le permite agregar sus propios colores personalizados.

Un primer plano del widget Herramienta de color, tal como aparece en el Editor de Venngage. La imagen se edita para que se sombree, excepto en el área donde los colores de muestra aparecen como pequeños mosaicos de colores debajo del título "Colores de muestra", en la parte inferior del widget debajo de Colores de marca. En este caso, hay tres filas de mosaicos de colores, y en la última fila en el extremo derecho, aparece un signo más gris, ampliado para que sea más visible.

Seleccione cualquier elemento   en el lienzo y abra la Herramienta de color, luego   haga clic en un mosaico de color   debajo de Colores de muestra para aplicar ese color al elemento en el lienzo. 

Cuando cambia el color de un elemento en su diseño, puede   guardar el color   para usarlo en el futuro en otros elementos. Seleccione el elemento y abra la Herramienta de color, luego haga clic en el   signo +   al final de los mosaicos de color en Colores de muestra. El color aparecerá como su propio mosaico en Swatch Colors. Seleccione cualquier otro elemento con color personalizable en su diseño y encontrará el color que muestreó en Colores de muestra cuando abra la Herramienta de color; aplíquelo a los elementos de su diseño.

Elimine   un color de muestra pasando el cursor sobre el mosaico de color en la Herramienta de color y haga clic en la '  x  ' roja que aparece en la esquina superior derecha del mosaico. 

En el Editor de Venngage, aparece un lienzo con un fondo azul claro y un encabezado azul oscuro con el número 08 junto al texto "¿Cuál es tu mayor dificultad cuando se trata de producir contenido atractivo?" Debajo de este encabezado, aparece un gráfico de barras con cuatro barras, la parte superior de las cuales es oscura, azul-púrpura. Un usuario hace doble clic en el gráfico de barras para abrir el menú Gráfico y hace clic en el icono de la herramienta Color junto a la fila de la hoja de cálculo que representa la barra superior azul-púrpura. El usuario hace clic en el signo más al final de la fila de mosaicos bajo el título "Colores de muestra" en el widget para agregar el color azul-púrpura a los colores de muestra.

Muestra una paleta completa generando una con nuestra herramienta de paleta de colores y  descargando los códigos HEX  .

¿Fue útil este artículo?

Usuarios a los que les pareció útil: 2 de 2

¿Tiene más preguntas? Enviar una solicitud