Support Centre

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. 

Color Wheel 2.png

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

Color Wheel.png

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  . 

Color Picker.png

¿ 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. 

 

 

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.

Opacity.png

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   .

 
 

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. 

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. 

 

 

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.

 

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. 

 

 

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. 

 

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