Gerador de Tons de Cor

Essas são as três formas clássicas de alterar uma cor mantendo seu matiz reconhecível. Uma sombra mistura a cor com preto, tornando-a mais escura. Um tom claro a mistura com branco, tornando-a mais clara e suave. Um tom neutro a mistura com cinza, atenuando-a sem levá-la ao preto ou branco puro. Esta ferramenta gera os três como uma faixa de 11 passos, da cor original até 0%.

Cada passo mistura os canais vermelho, verde, e azul da sua cor em direção ao alvo (preto, branco, ou cinza) por uma porcentagem fixa, a mesma abordagem simples de interpolação linear usada pela maioria das ferramentas de referência de cor, em vez de ajustar a luminosidade em HSL. Isso mantém a progressão visualmente uniforme e corresponde ao que você obteria misturando tinta em direção ao preto, branco, ou cinza.

Complementar apenas gira a matiz 180° ao redor da roda de cores mantendo a mesma saturação e luminosidade, então um vermelho vívido se torna um ciano igualmente vívido, esta é a "cor oposta" usada na teoria das cores e design. Invertido, por outro lado, inverte cada valor vermelho, verde e azul (255 menos o original), o que também muda o brilho, branco se torna preto sob inversão, mas permanece branco sob a operação complementar já que não há matiz para girar.

Triádico escolhe mais duas cores igualmente espaçadas 120° na roda de cores, dando três cores com forte contraste que ainda parecem equilibradas juntas. Análogo escolhe cores a 30° de cada lado do seu matiz, cores que ficam lado a lado na roda e naturalmente parecem harmoniosas. Monocromático mantém o matiz e saturação exatos da sua cor, mas varia apenas a luminosidade, dando um conjunto de cores garantidamente combinando já que são realmente a mesma cor em níveis de brilho diferentes.

As 216 cores seguras para web são a paleta que era exibida de forma idêntica em telas antigas de 256 cores, cada canal vermelho, verde, e azul limitado a um de seis valores (0, 51, 102, 153, 204, 255). Telas modernas não precisam dessa restrição, mas o equivalente seguro para web ainda é útil como referência para estilo retrô ou saída de cor extremamente limitada.

HSL, HSV, e CMYK todos descrevem a mesma cor através de modelos diferentes construídos para propósitos diferentes. HSL e HSV ambos descrevem o matiz, e a diferença entre o "valor" do HSV e a "luminosidade" do HSL significa que a mesma cor pode reportar uma porcentagem de saturação diferente entre os dois. CMYK descreve quanta tinta ciano, magenta, amarela, e preta uma impressora misturaria, o que segue regras de cor subtrativa em vez das regras de luz aditiva vermelha, verde, e azul que RGB e HSL/HSV usam, então não é uma conversão direta simples.

Sim. Clique em qualquer código hex na linha de Valores de cor, em qualquer amostra de sombra, tom claro, tom neutro, ou esquema de cores, para copiá-lo para sua área de transferência. A seção de Código CSS na parte inferior tem regras prontas de background-color, color, border-color, e box-shadow com seus próprios botões de copiar.