Guia do Color Tools

Seja bem-vindo (mais uma vez..) ao nosso Color Tools! Esperamos que lhe seja útil, apesar das coisas relativamente simples que ele faz. Você precisará ter Internet Explorer 5 ou superior para o JavaScript utilizado aqui funcionar. O Netscape deve funcionar também, porque suporta até mais coisas que o IE! Bem, de qualquer forma, você está aqui para aprender alguma coisa :-) Pois damos valor ao sangue e suor utilizados para criar aquela página cheia de botões:

Nós dividimos a página em quatro ferramentas distintas (referidas em vários lugares como módulos): o Conversor de Cores, Mapeador de Cores, Forjador de Cores e Gerador de Cores.

• Conversor: converte cores em HEX para cores em RGB decimal e vice-versa. Há diferentes campos para cada tipo de conversão.
• Mapeador: feito para auxiliá-lo a compor as cores de um layout. Ele irá dispor quatro cores que você der numa nova janela em um layout lado-a-lado para você compará-las umas com as outras e com o preto e o branco, incluindo também texto de cada cor dentro das outras.
• Forjador: permite que você misture cores para criar uma nova. Ele utilizará uma cor que servirá de base para adicionar as outras cores. Há diferentes formas de se misturar as cores que você pode escolher e você ainda pode controlar a quantidade das cores que entrarão na mistura.
• Gerador: o mais simples de todos, pode gerar uma cor aleatória dentro das escolhas dadas (como só vermelhos, cinzas, etc.), e contém uma lista com as cores mais comuns para você pegar e mandar para outro módulo através do botão "Copiar cor" para continuar as manipulações.

A maioria dos componentes de cada módulo têm curtas descrições ao se passar o mouse por sobre um deles. Infelizmente, a descrição não fica lá por muito tempo, você terá que tirar o cursor de cima e por de volta para continuar lendo. Este é o principal motivo para manter as descrições curtas. Outra coisa a mencionar é que as listas de ítens não têm descrição, portanto inserimos a descrição no texto à esquerda das listas (na maioria dos casos).
Cada módulo tem também uma área de visualização à direita (ou área de preview). Esta área é atualizada quando você deseleciona um campo que contém uma cor, utiliza os botões + e - ou finaliza uma operação (como converter ou combinar cores).

Abaixo vai uma descrição detalhada de cada módulo.

Pular para: Conversor | Mapeador | Forjador | Gerador | Topo

Conversor de Cores

Como converter cores:

De HEX para decimal (DEC):

• Digite a cor em HEX, sem o símbolo "#" no início, no primeiro campo (chamado "HEX").
• Depois de digitá-la, clique fora do campo para atualizar o preview dessa cor na parte de cima da "Área de Preview" (o quadrado em baixo relevo à direita no módulo).
• Clique no botão "> DEC" no final à direita.
• A cor é convertida para DEC e é mostrada na caixa de "Resultados" na parte inferior do módulo (antes da linha divisória) no formato Vermelho,Verde,Azul (R,G,B).
• Se quiser copiar os resultados para a área de transferência, clique no botão "Sel." ao lado e pressione CTRL+C.
• Talvez você queira copiar os resultados para outro módulo através do botão "Copiar >". Escolha o destino e pressione o botão. A cor será convertida de volta para HEX, porque cores decimais não são utilizadas em nenhum lugar dentro do Color Tools.

De DEC para HEX:

• Digite os componentes Vermelho, Verde e o Azul da cor separadamente nos campos R, G e B, respectivamente.
• Quando clicar fora de um dos campos, as mudanças feitas na cor como um todo (todos os componentes R,G,B) serão mostradas na parte de baixo da "Área de Preview" (o quadrado em baixo relevo à direita no módulo).
• Clique no botão "> HEX" no final à direita, após o campo "B".
• Os três componentes são convertidos para uma única cor HEX que aparece na caixa de "Resultados" na parte inferior deste módulo.
• Se quiser copiar os resultados para a área de transferência, clique no botão "Sel." ao lado e pressione CTRL+C.
• Talvez você queira copiar os resultados para outro módulo através do botão "Copiar >". Escolha o destino e pressione o botão. A cor será copiada sem o "#" no início.

Capítulo | Topo  

Mapeador de Cores

Como usar:

• Digite as quatro cores (diferentes, de preferência) nos quatro campos chamados "Cor 1" até "Cor 4" em HEX, sem um "#" no início.
• Clique no botão "Mapeá-las" na parte inferior do módulo.
• Uma janela irá aparecer com as quatro cores num layout lado-a-lado para você ver como elas se combinam entre si. Haverá também bordas pretas e brancas para referência em torno do centro, onde haverá quatro quadrados, cada um com uma cor e texto das outra três cores dentro deles.

Capítulo | Topo  

Forjador de Cores

Como usar:

• Digite a "Cor de Base". Ela servirá como o 'tom básico' da mistura ou a 'cor do papel'. Outras cores irão modificar esta.
• Digite a primeira cor a influenciar a de base no campo "Cor 1". O grau de influência é configurado no campo de porcentagem à sua direita.
• Se quiser, digite uma segunda cor e configure sua porcentagem de influência à direita do campo "Cor 2".
• Para não utilizar a cor 1 ou 2, deixe sua porcentagem em 0.
• Talvez queira mudar o "Método de Combinação" na lista de ítens se souber o que cada opção faz (leia a descrição detalhada abaixo).
• Se quiser inverter as cores utilizadas na operação, basta ticar a opção "Inverter" (não é mostrado no preview das cores originais).
• Clique no botão "Combinar".
• A cor resultante aparece na caixa de "Resultados" abaixo e é mostrada na parte maior da "Área de Preview".

Diferentes configurações:

Para escurecer ou clarear uma cor:

• Digite a cor de base - é a cor que deseja escurecer ou clarear.
• Digite na "Cor 1" preto puro (000000) ou branco puro (FFFFFF) para escurecer / clarear respectivamente a cor.
• Configure a porcentagem da primeira cor para quanto quiser escurecer ou clarear a cor de base.
• Deixe a porcentagem da segunda cor em 0.
• Escolha o método de combinação "Multiplicar".
• Clique em "Combinar".

Para apenas inverter uma cor:

• Digite a cor de base - será a cor para inverter.
• Deixe a porcentagem da primeira e segunda cor em 0.
• Tique a opção "Inverter".
• Clique em "Combinar".

Para fazer transparências:

• Digite a cor de base - será a "cor de fundo".
• Digite na "Cor 1" a que quiser fazer transparente.
• A porcentagem da primeira cor será sua opacidade.
• Deixe a porcentagem da segunda cor em 0.
• Escolha o método de combinação "Lógico".
• Clique em "Combinar".

Descrição individual de controles:

• Lista de Métodos: O tipo de cálculo que o programa irá fazer para combinar as cores. Todos eles consideram as porcentagens na mistura. Por default "Colorir" está selecionado.
  • Lógico: Compara o R, G e B de cada cor com o RGB da cor de base individualmente, e então decide se deve adicionar ou subtrair cada componente para aproximar a base das outras cores. Se, por exemplo, o valor de R da Cor 1 é maior que o R da cor de base, a diferença entre os dois (multiplicado pela %) será adicionada ao R de base. Ao contrário seria subtraído.
    Esta método é puramente matemático, os resultados podem variar do que você esperaria vendo as cores involvidas.
  • Colorir: Tenta obter resultados mais de acordo com o que você vê. O programa verifica as proporções em que cada componente RGB é encontrado na cor (o mais baixo valor dos RGB se torna 0, e os outros tem seu valor começando por aquele ponto) para adicionar/subtrair para a/da cor de base utilizando o mesmo critério do método "Lógico".
    Outra coisa sobre este método é que ele reage de forma diferente ao preto, branco e tons de cinza. Estes tons irão escurecer ou clarear a cor proporcionalmente melhor do que se utilizar cores para fazer isso (isso se aplica a cores que têm todos os componentes RGB iguais).
    Exemplo: uma cor de valores decimais 255,150,20 tem uma proporção dos componentes de 235,130,0. O programa usa o mesmo método de verificação que faz com o método "Lógico" para determinar se deve adicionar ou subtrair cada componente da cor de base. Ele utiliza os valores RGB originais para fazer isso. Então, na hora de adicionar/subtrair, ele utilizará as proporções, inclusive a %.
  • Multiplicar: Não irá criar uma cor totalmente nova, mas irá variar o brilho da cor de base de acordo com o brilho e porcentagem das outras cores.
    Exemplo: se a Cor 1 é matematicamente mais escura que a base, ela irá escurecer a base.
  • Adicionar / Subtrair: Simples adição / subtração matemática de valores, sem discernir nada. É como o "Lógico" sem fazer nenhuma decisão.
  • Opôr: O oposto do método "Lógico": ao invés de aproximar as cores, irá divergí-las. Pode ter resultados estranhos, especialmente se iverter as cores também!

Capítulo | Topo  

Gerador de Cores

Como usar:

Gerando uma cor aleatória:

• Escolha na primeira lista de ítens se quer qualquer "Cor", ou se quer um tipo específico (todos os outros).
• Clique no botão "Gerar".
• A cor gerada aparece na primeira caixa no final à direita e irá ser mostrada na "Área de Preview".
• Para utilizá-la em algum lugar, clique no botão "Sel." ao lado da cor gerada, escolha um destino na lista no final deste módulo (nos desculpamos, não há área de transferência, terá que fazer isso manualmente), e clique em "Copiar cor".

Como escolher uma cor predefinida:

• Escolha na segunda lista de ítens a cor que deseja. Nós incluímos as cores mais relevantes, de acordo com nosso próprio critério.
• Assim que escolhê-la, ela aparecerá na caixa de baixo no final à direita e será mostrada na "Área de Preview".
• Para utilizá-la em algum lugar, clique no botão "Sel." ao lado da cor gerada, escolha um destino na lista no final deste módulo (nos desculpamos, não há área de transferência, terá que fazer isso manualmente), e clique em "Copiar cor".

Capítulo | Topo