Support Centre

Pesquisa

Aprenda a usar a ferramenta Color

Gino B.
Gino B.
  • Atualizado

A Ferramenta de cores permite  selecionar cores  ,  personalizar seus valores claros e escuros  ,  fazer amostras  e  selecionar Cores de marca  ,  amostras de cores de seu dispositivo  e muito mais.

Aprenda a usar os recursos da Color Tool e dê vida aos seus designs por meio das cores. 

Encontre a ferramenta Color na barra de ferramentas superior

O  ícone  da ferramenta Cor  aparece   na barra de ferramentas superior  quando você  seleciona  qualquer elemento na tela de design  que tenha uma cor personalizável (isso inclui ícones, símbolos, tabelas, widgets inteligentes, etc.).

 

 

O  ícone da ferramenta Cor  aparece como um quadrado com a cor do elemento e uma lágrima ou forma de gota no meio:

O ícone da Color Tool aparece em azul claro, com uma forma de lágrima azul mais escura no centro.

Encontre o ícone na  barra de ferramentas superior  ao lado de outras ferramentas de estilo para o elemento selecionado na tela, incluindo opacidade para elementos como ícones e formas ou ferramentas de estilo de texto para caixas de texto. 

A barra de ferramentas superior de um design no Venngage Editor com o título 'Social Media Infographic'. No menu da face da fonte, o ícone da ferramenta Color (colorido em laranja, com uma forma de lágrima cinza escuro no centro) é destacado por uma caixa vermelha escura e uma seta vermelha escura.

Para elementos com  bordas e preenchimento  , como  widgets inteligentes  , o ícone de cor aparece como um quadrado e uma imagem de borda: 

Uma visão parcial da barra de ferramentas superior de um design no Venngage Editor. A segunda linha da barra de ferramentas mostra dois ícones da ferramenta Cor, lado a lado, no menu Alinhamento. Os ícones da Color Tool são destacados por uma caixa vermelha escura e uma seta azul escura.

A ferramenta Color para  gráficos  aparece em um menu de contexto especial usado para editar todos os detalhes do gráfico  (incluindo valores de dados, tipos de gráfico, legendas e rótulos, etc.). Para acessá-lo,  clique duas vezes no gráfico  ou clique no gráfico para selecioná-lo e, em seguida, clique em "  Editar gráfico  " na barra de ferramentas superior.

Visão geral dos recursos da Ferramenta de cores

Um close-up do widget Color Tool, como aparece no Venngage Editor. A parte superior do widget é dominada por uma roda de cores, que representa um arco-íris de cores que o usuário pode escolher, usando o ponto seletor circular para indicar de qual parte da roda ele está selecionando uma cor. Nesse caso, o ponto seletor aparece em uma área com um tom laranja claro. Um controle deslizante ao lado da roda de cores representa o valor claro/escuro da cor, com o ponto seletor circular indicando que o controle deslizante está definido para o valor mais claro. Sob a roda de cores, há uma barra deslizante chamada 'Opacidade', com o ponto seletor definido quase no nível mais alto de opacidade. Abaixo dele, aparece um grande quadrado com cantos arredondados, com a mesma cor laranja claro selecionada na roda de cores. Este é o bloco de cores que visualiza a cor que o usuário selecionou. Ao lado do bloco de cores há dois cabeçalhos: um para HEX, que é uma linguagem de codificação de cores que representa cores digitais com uma sequência de seis letras e números combinados após um sinal de jogo da velha. Aqui, a luz laranja é representada como HEX #FFB458. Abaixo dele estão os valores RGB da cor, que representam a mesma cor, indicando suas proporções de vermelho, verde e azul e sua opacidade. R=255, G=180 e B=88, representando o laranja claro. O nível de opacidade indicado pelo controle deslizante também é representado pelo valor a; aqui é exibido como A=99 de uma possível opacidade de 100. A seção inferior contém dois títulos, Cores da marca e Cores de amostra, sob os quais aparecem vários pequenos blocos de cores. que é uma linguagem de codificação de cores que representa cores digitais com uma sequência de seis letras e números combinados após um sinal de libra. Aqui, a luz laranja é representada como HEX #FFB458. Abaixo dele estão os valores RGB da cor, que representam a mesma cor, indicando suas proporções de vermelho, verde e azul e sua opacidade. R=255, G=180 e B=88, representando o laranja claro. O nível de opacidade indicado pelo controle deslizante também é representado pelo valor a; aqui é exibido como A=99 de uma possível opacidade de 100. A seção inferior contém dois títulos, Cores da marca e Cores de amostra, sob os quais aparecem vários pequenos blocos de cores. que é uma linguagem de codificação de cores que representa cores digitais com uma sequência de seis letras e números combinados após um sinal de libra. Aqui, a luz laranja é representada como HEX #FFB458. Abaixo dele estão os valores RGB da cor, que representam a mesma cor, indicando suas proporções de vermelho, verde e azul e sua opacidade. R=255, G=180 e B=88, representando o laranja claro. O nível de opacidade indicado pelo controle deslizante também é representado pelo valor a; aqui é exibido como A=99 de uma possível opacidade de 100. A seção inferior contém dois títulos, Cores da marca e Cores de amostra, sob os quais aparecem vários pequenos blocos de cores. Abaixo dele estão os valores RGB da cor, que representam a mesma cor, indicando suas proporções de vermelho, verde e azul e sua opacidade. R=255, G=180 e B=88, representando o laranja claro. O nível de opacidade indicado pelo controle deslizante também é representado pelo valor a; aqui é exibido como A=99 de uma possível opacidade de 100. A seção inferior contém dois títulos, Cores da marca e Cores de amostra, sob os quais aparecem vários pequenos blocos de cores. Abaixo dele estão os valores RGB da cor, que representam a mesma cor, indicando suas proporções de vermelho, verde e azul e sua opacidade. R=255, G=180 e B=88, representando o laranja claro. O nível de opacidade indicado pelo controle deslizante também é representado pelo valor a; aqui é exibido como A=99 de uma possível opacidade de 100. A seção inferior contém dois títulos, Cores da marca e Cores de amostra, sob os quais aparecem vários pequenos blocos de cores.

O menu de cores inclui:

Encontre o bloco de visualização de cores

O  bloco de visualização  é a seção da ferramenta Cor que  mostra a aparência da cor que você está personalizando em tempo real  .

À medida que você usa o seletor de cores, o controle deslizante claro/escuro e o controle deslizante de opacidade ou os campos HEX/RGBA para ajustar uma cor, ela será alterada na tela e também no bloco de   visualização  .

Um close-up do widget Color Tool, como aparece no Venngage Editor. A imagem é editada para ficar sombreada, exceto na área em que o bloco de visualização de cores exibe uma cor laranja claro. O bloco de visualização aparece abaixo da roda do seletor de cores e do controle deslizante de opacidade, à esquerda da seção Código HEX e valores RGBA e acima do cabeçalho Cores da marca.

Fique de olho enquanto faz os ajustes, para saber quando chegar à cor desejada!

Selecione e personalize uma cor (roda do seletor de cores, controle deslizante claro/escuro)

Selecione um  ícone  ,  símbolo  ,  tabela  ou  gráfico  para abrir a   ferramenta Cor  na barra de ferramentas superior. Clique em qualquer lugar na  roda do seletor de cores  para selecionar uma cor.

Um close-up do widget Color Tool, como aparece no Venngage Editor. A imagem é editada para ficar sombreada, exceto na área onde a roda do seletor de cores aparece na parte superior, à esquerda do controle deslizante de valor claro/escuro e acima do controle deslizante de opacidade.

O ponto seletor mostrará a área em que está a cor selecionada e o   bloco de visualização de cores  mostrará um close-up. Você também verá a   mudança de cor do elemento na tela em tempo real ao usar a ferramenta Color  . 

Uma visão parcial de um design no Venngage Editor mostra uma tela com fundo azul claro e um caractere de número grande '08' em azul escuro. Um usuário clica para selecionar o 08 e o ícone de gota da Ferramenta de cores aparece na barra de ferramentas superior, entre outras ferramentas para estilizar o texto. O usuário clica no ícone da Ferramenta de cores e abre o widget Ferramenta de cores. O usuário clica no ponto seletor na roda do seletor de cores, arrastando-o da parte inferior esquerda do seletor de cores para o canto superior esquerdo. O bloco de visualização muda de cor para corresponder ao local onde o usuário moveu o ponto seletor; a cor do 08 na tela de desenho também muda à medida que o usuário move o ponto seletor. O código HEX e os valores RGB mudam para corresponder à seleção do usuário no seletor de cores.

Quer uma  seleção mais precisa  ? Clique e  arraste  o cursor enquanto ajusta a posição do seletor para exibir variações de matiz mais sutis. 

O  controle deslizante  claro/escuro  ao lado da roda de cores determina quanto branco ou preto é adicionado à cor selecionada na roda. 

Uma visão parcial de um design no Venngage Editor mostra uma tela com fundo azul claro e um caractere de número grande '08' em azul escuro. O 08 é selecionado e o widget Color Tool é aberto, sobrepondo parcialmente a tela de design. O usuário clica no ponto seletor no controle deslizante de valor claro/escuro à direita da roda seletora de cores, movendo-o para cima e para baixo para tornar a cor azul do 08 mais clara ou mais escura. O bloco de visualização muda de cor para corresponder ao local onde o usuário moveu o ponto seletor; a cor do 08 na tela de desenho também muda à medida que o usuário move o ponto seletor. Os valores de Código HEX e RGB mudam para corresponder à seleção do usuário no controle deslizante.

Alterar a opacidade de uma cor

A opacidade de uma cor determina quanto dos elementos/cores por trás dela são visíveis, controlando o quanto  ela é  opaca  ou   transparente  .

Um close-up do widget Color Tool, como aparece no Venngage Editor. A imagem é editada para ficar sombreada, exceto na área onde a roda do seletor de cores aparece na parte superior, à esquerda do controle deslizante de valor claro/escuro e acima do controle deslizante de opacidade.

Use o controle deslizante com o rótulo   "Opacidade  " para aumentar ou diminuir o nível de opacidade de uma cor em qualquer elemento com cores personalizáveis. 

Use o campo sob o valor "  A  " (no final da linha com RGB) para controlar a opacidade com um número: basta digitar um entre 0 e 100. Zero é o mais transparente e 100 é o mais opaco. 

Definir a opacidade para um valor mais baixo criará um efeito  transparente   .

Uma visão aproximada de uma tela de design no Venngage Editor. Um usuário seleciona um ícone monocromático de uma garrafa de xarope com uma folha de bordo. O ícone é marrom claro e o ícone da ferramenta Color na barra de ferramentas superior reflete a mesma cor marrom claro. As ferramentas aparecem na barra de ferramentas superior quando o ícone é selecionado. O usuário clica na ferramenta % de preenchimento, que aparece como um menu suspenso com o símbolo de um círculo meio claro, meio escuro. Quando o menu suspenso é aberto, o preenchimento é definido como 100. O usuário rola o menu para cima e seleciona 70% de preenchimento. O ícone da garrafa de xarope agora aparece em duas cores: a cor marrom claro é o preenchimento majoritário e um vermelho brilhante preenche os 30% superiores do ícone. A barra de ferramentas superior agora exibe dois ícones da Ferramenta de cores: um para o preenchimento de cor marrom claro e outro para o preenchimento de cor vermelha brilhante.

Insira o código HEX ou o número RGB da cor

Altere a cor de um elemento  inserindo o código HEX ou os valores RGB, selecione o elemento desejado e abra o widget  Color Tool  clicando no ícone na barra de ferramentas superior. 

Um close-up do widget Color Tool, como aparece no Venngage Editor. A imagem é editada para ser sombreada, exceto na área onde os campos de valor HEX e RGBA aparecem, que estão sob o controle deslizante Opacidade e à direita do bloco de visualização de cores.

Insira os caracteres do código HEX no campo de texto em "  Hex  " ou os valores R, G e B no campo abaixo de cada letra para alterar manualmente a cor. Pressione 'Enter' ou clique fora do campo para confirmar a alteração.

Personalize a cor alterando os valores de claro/escuro, a opacidade ou até mesmo movendo o seletor no Seletor de cores para o tom de sua preferência. 

Uma visão parcial de um design no Venngage Editor mostra uma tela com fundo azul claro e um caractere de número grande '08' em azul escuro e uma linha pontilhada abaixo do número em azul mais claro. Um usuário seleciona a linha pontilhada e abre o widget Color Tool na barra de ferramentas superior, em seguida, clica no campo de texto em HEX que mostra o código para a cor azul claro, #2A90AD. O usuário então clica em outra guia em seu navegador, que mostra uma visão parcial do gerador de paleta de cores acessível da Venngage. O usuário clica no botão Generate Random Palette e, em seguida, seleciona uma cor na linha superior, que é um vermelho cranberry. O usuário copia o código HEX para o vermelho, que é #952547, e depois clica de volta no Venngage Editor, onde seleciona a linha pontilhada novamente e abre a ferramenta Color. O usuário clica no campo de código HEX e cola o código HEX para o vermelho, substituindo o código HEX para o azul e alterando a cor da linha pontilhada, que agora é refletida na tela, bem como pelo bloco de visualização de cores em o widget Ferramenta de cores. O usuário fecha a ferramenta Color.

Use nosso  gerador de paleta de cores  para  criar cores  e copie os códigos HEX para colá-los diretamente na ferramenta de cores. É fácil fazer  uma amostra de uma paleta inteira  para usar em seu design  . 

Experimente uma cor com a ferramenta Conta-gotas

O conta-gotas  é uma ferramenta pequena, mas poderosa, que permite que você experimente cores de qualquer lugar do seu dispositivo, incluindo a própria tela de design.

Um close-up do widget Color Tool, como aparece no Venngage Editor. A imagem é editada para ficar sombreada, exceto na área onde aparece o conta-gotas, à direita do campo do código HEX. O ícone da ferramenta conta-gotas também é ampliado para parecer maior.

Selecione o ícone ou outro elemento cuja cor deseja alterar e abra a ferramenta Cor.

Clique no ícone Conta-gotas no widget Ferramenta de cores e clique em qualquer elemento na tela do seu dispositivo com a cor desejada. O cursor torna-se uma lente de aumento que permite ver de perto a cor que você está escolhendo. Isso funciona em imagens com uma alta contagem de pixels, bem como em imagens mais simples, como vetores. 

No Venngage Editor, aparece uma tela com um fundo azul claro e um cabeçalho azul escuro com o número 08 ao lado do texto 'Qual é a sua maior dificuldade quando se trata de produzir conteúdo envolvente?' Sob este título, um gráfico de barras aparece com quatro barras, a parte superior das quais é vermelha clara. As três barras abaixo dela são todas de cor azul-petróleo médio. Um usuário expande o cabeçalho Fotos na barra lateral esquerda e digita 'roxo' na barra de pesquisa, retornando várias fotos com tons de roxo. O usuário seleciona uma das fotos, de uma lâmpada de LED com diferentes tonalidades de roxo e magenta, e a adiciona à tela de design. O usuário, então, clica duas vezes no gráfico de barras para abrir o menu do gráfico e clica no ícone da Ferramenta de cores ao lado da linha na planilha que representa a barra superior vermelha clara. O usuário clica no conta-gotas no widget Color Tool. O cursor do usuário é ampliado, tornando os pixels sobre os quais ele passa mais visíveis. O usuário passa o cursor sobre a foto da lâmpada LED roxa e clica em uma parte da foto com a cor azul-roxo. A barra superior do gráfico de barras muda para essa cor azul-púrpura, assim como o bloco de visualização de cores na ferramenta Cor e os valores HEX/RGB, para refletir a mudança. O usuário fecha o Widget de ferramenta de cores e clica na tela de design, fechando o menu do gráfico. O usuário exclui a foto da foto LED roxa da tela. A barra superior do gráfico de barras muda para essa cor azul-púrpura, assim como o bloco de visualização de cores na ferramenta Cor e os valores HEX/RGB, para refletir a mudança. O usuário fecha o Widget de ferramenta de cores e clica na tela de design, fechando o menu do gráfico. O usuário exclui a foto da foto LED roxa da tela. A barra superior do gráfico de barras muda para essa cor azul-púrpura, assim como o bloco de visualização de cores na ferramenta Cor e os valores HEX/RGB, para refletir a mudança. O usuário fecha o Widget de ferramenta de cores e clica na tela de design, fechando o menu do gráfico. O usuário exclui a foto da foto LED roxa da tela.

Use o conta-gotas para  obter uma amostra de cor  também; basta selecionar a cor desejada com o Conta-gotas e clicar no círculo com o  ícone +  dentro de Cores do projeto para salvá-lo como uma amostra.

No Venngage Editor, uma tela aparece com um fundo azul claro e um título azul escuro com o número 08 aparecendo ao lado do texto 'Qual é a sua maior dificuldade quando se trata de produzir conteúdo envolvente?' Sob este título, um gráfico de barras aparece com quatro barras. No canto do desenho há um ícone com dois marcadores de localização, um vermelho e um amarelo, e uma linha pontilhada conectando-os. Um usuário clica duas vezes na caixa de texto ao redor do número '08' para selecionar o texto. O usuário clica no ícone da ferramenta Color na barra de ferramentas superior e seleciona a ferramenta conta-gotas no widget. O cursor do usuário se transforma em um círculo, que amplia os elementos na tela de desenho no Editor. O usuário move o cursor sobre o marcador de localização amarelo no ícone no canto inferior direito do design e seleciona a cor, que move a roda de cores no widget Ferramenta de cores para o mesmo tom de amarelo e também altera a cor de o texto '08' para o mesmo tom de amarelo. O usuário então clica no sinal de mais sob o título 'Swatch Colors' no widget Color Tool, que adiciona a cor amarela às amostras salvas neste design.

Use cores de marca ou amostra

Cores da marca

As cores da marca  adicionadas ao My Brand Kit  podem ser acessadas no menu de cores, para que você possa aplicá-las facilmente a diferentes elementos em seu design. Eles estão localizados no bloco de cores e na seção Código HEX/RGB.

Um close-up do widget Color Tool, como aparece no Venngage Editor. A imagem é editada para ser sombreada, exceto na área onde as Cores da Marca aparecem como pequenos ladrilhos coloridos sob o título 'Cores da Marca'. Aqui, estão disponíveis cinco cores de marca representadas por cinco tiles diferentes.

 

Alterne entre diferentes cores de kit de marca  em "  Meu kit de marca  " na barra lateral esquerda.

Você também pode  aplicar  as cores  do Kit da Minha Marca   a todos os elementos do seu design usando a ferramenta na barra lateral esquerda. 

Um design simples aparece em uma tela no Venngage Editor, mostrando um navio a vapor cinza escuro com um fundo vermelho flutuando em água azul escura e se aproximando de uma grande montanha azul escura, contra um fundo azul claro. Na barra lateral esquerda, o usuário clica no kit da minha marca para expandi-lo e clica nos blocos em 'Cores da marca', que aparecem sob o logotipo da marca do usuário e incluem azul brilhante, magenta e laranja escuro. As cores no bloco Cores da marca são aplicadas aleatoriamente a todos os elementos na tela de design, alterando a cor da água de azul escuro para laranja, da montanha para azul claro e do navio para laranja mais claro. Nos blocos de visualização em Cores da marca, um ícone aleatório é exibido. À medida que o usuário clica nos blocos de cores novamente, as cores da marca são reaplicadas aos elementos na tela de design, mas embaralhadas,

 

Quando o ícone aleatório aparecer sobre as cores da marca, clique neles novamente para reatribuir aleatoriamente as cores aos seus elementos de design.

Swatch uma cor (adicione-a a Swatch Colors)

As cores de amostra   aparecem como blocos em sua própria seção, abaixo de Cores da marca e dos blocos de cores da marca. Estes são pré-gerados de acordo com as cores que aparecem no modelo.

O  sinal de +   que aparece em um círculo na parte inferior da última linha das cores de amostra permite que você adicione suas próprias cores personalizadas.

Um close-up do widget Color Tool, como aparece no Venngage Editor. A imagem é editada para ser sombreada, exceto na área onde as cores de amostra aparecem como pequenos blocos coloridos sob o título 'Cores de amostra', na parte inferior do widget abaixo de Cores da marca. Nesse caso, há três fileiras de ladrilhos coloridos e, na última fileira à direita, aparece um sinal de adição cinza, ampliado para torná-lo mais visível.

Selecione qualquer elemento   na tela e abra a Ferramenta de cores e   clique em um ladrilho de cor   em Cores de amostra para aplicar essa cor ao elemento na tela. 

Ao alterar a cor de um elemento em seu design, você pode   salvar a cor   para uso futuro em outros elementos. Selecione o elemento e abra a Ferramenta de cores e clique no   sinal de +   no final dos ladrilhos de cores em Cores de amostra. A cor aparecerá como seu próprio bloco em Cores de amostra. Selecione qualquer outro elemento com cor personalizável em seu design e você encontrará a cor que você amostrou em cores de amostra ao abrir a ferramenta de cores; aplique-o aos elementos do seu design.

Remova   uma amostra de cor passando o mouse sobre o ladrilho de cor na ferramenta Cor e clique no '  x  ' vermelho que aparece no canto superior direito do ladrilho. 

No Venngage Editor, aparece uma tela com um fundo azul claro e um cabeçalho azul escuro com o número 08 ao lado do texto 'Qual é a sua maior dificuldade quando se trata de produzir conteúdo envolvente?' Sob esse título, um gráfico de barras aparece com quatro barras, a parte superior das quais é azul-púrpura escura. Um usuário clica duas vezes no gráfico de barras para abrir o menu do gráfico e clica no ícone da ferramenta Color ao lado da linha na planilha que representa a barra superior azul-púrpura. O usuário clica no sinal de mais no final da linha de blocos sob o título 'Swatch Colors' no widget para adicionar a cor azul-roxo às cores Swatch.

Experimente uma paleta inteira gerando uma com nossa ferramenta de paleta de cores e  baixando os códigos HEX  . 

Esse artigo foi útil?

Usuários que acharam isso útil: 2 de 2

Tem mais dúvidas? Envie uma solicitação