A maioria das paletas começa com uma cor que alguém já gosta: uma marca azul, o verde de um logotipo, uma amostra de tecido para um casamento A parte difícil é tudo depois dessa primeira escolha Quais cores acompanham, quantas você precisa e por que um conjunto que parece equilibrado em uma ferramenta de design desmorona quando o texto fica em cima dele?
Harmonia de cores responde às duas primeiras perguntas com geometria simples em uma roda de cores O contraste responde à terceira, e é o que as pessoas pulam Este guia cobre ambos, com valores HEX reais que você pode verificar, e mostra como o livre gerador paleta cores transforma uma cor base em seis tipos de paleta.
tl;dr: Um gerador de paleta de cores gira uma cor base & #39; s matiz em torno da roda de cores HSL por ângulos fixos (180 graus para complementar, 120 para triádico, 90 para tetrádico, 30 e 60 para análogo) ou move sua leveza para fazer tons, matizes e conjuntos monocromáticos O gerador de paleta de cores Toolz faz este lado do cliente, livre, sem inscrição: pegue uma base, escolha um dos seis modos, clique em uma amostra para copiar seu código HEX ou copie todo o conjunto como propriedades personalizadas CSS HSL não é perceptualmente uniforme, portanto, verifique qualquer par de texto e fundo contra as taxas de contraste WCAG antes de enviá-lo.
O que é um gerador de paleta de cores?
Um gerador de paleta de cores é uma ferramenta que pega uma cor inicial e calcula cores relacionadas a partir dela usando regras fixas, de modo que o conjunto parece coordenado sem tentativa e erro As regras vêm da roda de cores: cores opostas entre si contrastam, cores próximas umas das outras se misturam e cores espaçadas uniformemente ao redor do equilíbrio da roda.
O gerador Toolz funciona em HSL, que descreve uma cor como matiz, saturação e leveza A matiz é um ângulo de 0 a 360 graus ao redor da roda (vermelho em 0, verde em 120, azul em 240).A saturação é o quão vívida é a cor, de 0% cinza a 100% de cor total A leveza vai de 0% preto a 100% branco HSL é definida para a web no Módulo de cores CSS nível 4 especificação, e cada navegador converte-o para os mesmos valores RGB.
Trabalhar em HSL torna as regras de harmonia fáceis de expressar Uma cor complementar é a mesma saturação e leveza com 180 adicionados à tonalidade Isso é uma adição em vez de muito violino com controles deslizantes RGB.
Quais são os seis modos de harmonia?
Cada modo é uma receita para se afastar da cor base Aqui está exatamente o que o gerador Toolz faz em cada um, tirado de seu código-fonte.
| modo | O que muda | Embalagens | Posições matiz |
|---|---|---|---|
| Tons & amp; Tintas | Apenas leveza, definida como 90, 75, 60, o valor base, 35, 22 e 12 | 7 | Matiz base |
| monocromático | Leveza e saturação juntas | 5 | Matiz base |
| complementar | A tonalidade gira 180 graus, com uma base mais clara e um complemento mais escuro | 4 | Base, base + 180 |
| análogo | A tonalidade aumenta 30 graus em cada sentido | 5 | -60, -30, base, +30, +60 |
| triádico | A tonalidade espaçou um terço do círculo | 3 | Base, +120, +240 |
| Tetrádico | Matiz espaçado um quarto do círculo | 4 | Base, +90, +180, +270 |
Dois detalhes importam na prática, Análogo, triádico e tetrádico manter a cor base' s saturação e leveza em cada amostra, então eles só mudam de tonalidade Tons & amp; Tintas e Monocromático manter a tonalidade e mudar a luminosidade, de modo que eles produzem luz e escuro versões de uma cor.
Um exemplo trabalhado: cada modo de #4466ee
O gerador abre com #4466ee, um azul médio Convertido para HSL é matiz 228, saturação 83%, leveza 60%. Aqui está o que cada modo retorna para essa base Estes são os códigos HEX que a ferramenta imprime, e você pode reproduzi-los com a conversão padrão HSL para RGB na especificação CSS.
triádico adiciona 120 e 240 à tonalidade: 228, depois 348, depois 108 (468 envolve 108).
#4466ee hsl(228, 83%, 60%) blue
#ee4466 hsl(348, 83%, 60%) pink-red
#66ee44 hsl(108, 83%, 60%) green
Observe o padrão Na mesma saturação e leveza, girar exatamente um terço da roda reorganiza os mesmos três valores de canal RGB: 44, 66 e e e trade places.
complementar adiciona 180, que pousa na tonalidade 48, um amarelo quente O modo também inclui uma versão mais clara da base e uma versão mais escura do complemento, então você obtém quatro amostras: #8aa0f4, #4466ee, #eecc44 e #d2ac14.
análogo passos 30 graus por vez de 168 a 288: #44eecc, #44bbee, #4466ee, #7744ee, #cc44ee. Lê-se como uma faixa do azul-petróleo ao azul ao violeta.
Tetrádico adiciona 90, 180 e 270: #4466ee, #ee44bb, #eecc44, #44ee77.
monocromático mantém a tonalidade 228 e troca a saturação pela leveza em ambas as direções: #c4cded, #879ae8, #4466ee, #0936ec, #0225b1.
Tons & amp; Tintas define leveza para 90, 75, 60, o valor base, 35, 22 e 12: #d0d9fb, #8aa0f4, #4466ee, #4466ee, #0f2da3, #0a1c67, #050f38.
O último mostra uma peculiaridade que vale a pena conhecer A escala de sombra usa etapas fixas de leveza mais a leveza da base' s própria Quando a base passa a sentar-se exatamente 90, 75, 60, 35, 22 ou 12 por cento de leveza, como #4466ee faz em 60, duas amostras saem idênticas Empurre a leveza da base em um passo se você quiser sete cores distintas.
Como você escolhe a harmonia certa para um trabalho?
Escolha a harmonia pelo quanto contraste o design precisa. Os esquemas de baixo contraste parecem calmos e fáceis de manter consistentes; esquemas de alto contraste chamam a atenção e são fáceis de exagerar.
| meta | Bom modo de partida | por que |
|---|---|---|
| Uma escala de cores UI (100 a 700) | Tons & amp; Tintas | Passos previsíveis de luz para escuro de uma tonalidade |
| Uma marca mínima e coesa | monocromático | Tudo compartilha uma tonalidade, nada entra em conflito |
| Um call-to-action que se destaca | complementar | A tonalidade oposta é o contraste mais forte |
| Um visual suave e natural | análogo | Mistura de tons vizinhos |
| Um conjunto lúdico e equilibrado | triádico | Três matizes uniformemente espaçados, nenhum dominante |
| Gráficos com diversas séries | Tetrádico | Quatro matizes distintos que ainda se relacionam |
Uma regra comum para layouts é deixar uma cor cobrir a maior parte da área, uma segunda tomar uma parte menor, e um acento aparecer com moderação Ele funciona bem com paletas complementares e triádicas, onde dar todas as cores espaço igual tende a olhar alto.
Por que uma paleta parece equilibrada, mas lê mal?
Uma paleta pode parecer equilibrada em HSL e ainda falhar na tela porque a leveza HSL não é o quão brilhante uma cor parece para uma pessoa HSL trata cada matiz com 60% de leveza como igualmente leve A visão humana não.
O exemplo complementar acima torna este concreto. #4466ee e #eecc44 ambos têm leveza HSL de 60% Sua luminância relativa, a medida que as Diretrizes de Acessibilidade de Conteúdo da Web usam para o brilho percebido, é muito diferente: cerca de 0,17 para o azul e cerca de 0,62 para o amarelo é várias vezes mais brilhante para o olho.
Essa lacuna aparece como contraste. Usando a fórmula WCAG, taxa de contraste = (L1 + 0,05) /(L2 + 0,05), onde L1 é a cor mais clara' s luminância:
| Par | Relação de contraste | WCAG AA para texto normal (4.5:1) |
|---|---|---|
| Texto branco em #4466ee | cerca de 4,77:1 | Passa |
| Texto branco em #eecc44 | cerca de 1,57:1 | falha |
| Texto preto em #eecc44 | cerca de 13,4:1 | Passa |
O próprio gerador já reage a isso: cada amostra escolhe texto de rótulo escuro ou branco a partir de uma estimativa de brilho, e é por isso que as amostras amarelas recebem rótulos escuros. Para designs reais, execute os pares de texto e fundo que você planeja usar por meio de um verificador do contraste da cor. Os limites vêm de WCAG 2.2: 4,5:1 para texto normal e 3:1 para texto grande no nível AA. O guia de contraste de cores caminha passo a passo pela matemática da luminância.
Como exportar uma paleta como variáveis CSS?
Clique em Copiar CSS e o gerador coloca a paleta atual em sua área de transferência como propriedades personalizadas CSS :root. Os nomes são numerados em passos de 100 em ordem de swatch Para o exemplo triádico:
:root {
--color-100: #4466ee;
--color-200: #ee4466;
--color-300: #66ee44;
}
Cole isso na parte superior de uma folha de estilo e faça referência às cores em qualquer lugar:
.button-primary {
background: var(--color-100);
color: #ffffff;
}
A numeração segue a ordem de amostras, não a leveza Em Tons & amp; Modo de tonalidades que passa a correr claro para escuro, então --color-100 é a tonalidade mais leve No modo triádico ou análogo, os números são apenas posições Renomeie as variáveis para algo significativo, como --brand, --accent e --surface uma vez que você tenha escolhido, porque --color-200 não significa nada para a próxima pessoa que está lendo seu CSS.
Para copiar uma única cor em vez disso, carregue na sua amostra O código HEX vai para a área de transferência e a amostra mostra o & quot; Copiado" por um momento.
Você pode fazer um casamento ou paleta pastel com ele?
Sim, desde que traga a cor inicial Não há predefinições de casamento ou temas selecionados, então a paleta é tão boa quanto a base que você escolher.
Para um casamento, pegue uma cor de algo real: as flores, o estoque de cartão de convite, um tecido de vestido de dama de honra Digite seu código HEX e experimente cada modo Começando de um verde sábio, #9caf88, Retornos complementares #c2ceb6, #9caf88, uma lavanda empoeirada #9b88af e um mais profundo #755e8 d. Essa lavanda contra sálvia é um emparelhamento clássico, e a matemática encontrou em um clique.
Para pastéis, comece a partir de uma base pálida e suavemente saturada, como #a7c7e7. analógico, Triádico e Tetrádico manter essa leveza e saturação em cada amostra, de modo que todo o conjunto permanece suave Tons & amp; Tintas e Monocromático deliberadamente mover a leveza, então eles adicionam cores escuras, até #0d1f30 para que azul Não há slider de luminosidade separado; a cor base é o controle.
As cores da tela e as cores impressas diferem Um monitor mistura luz vermelha, verde e azul, enquanto uma impressora estabelece tinta ciano, magenta, amarela e preta no papel, e algumas cores brilhantes da tela não têm equivalente exato de tinta Se uma paleta estiver entrando em papelaria, peça uma prova impressa antes de uma execução completa.
Quais são os erros comuns e os casos de erro?
A maioria dos problemas de paleta vem da entrada ou de confiar demais na matemática.
A paleta fica azul enquanto você digita. Até que a caixa de texto contenha um código HEX válido, o gerador volta para #4466ee Um valor meio digitado como #9c ou #9caf8 mostra a paleta azul por omissão O campo aceita três ou seis dígitos hexadecimais, com ou sem o #, então #9ca a caminho de #9caf88 mostra brevemente uma paleta para #99ccaa.
A amostra de base está a um passo de distância. As cores são arredondadas para números HSL inteiros antes de serem convertidas novamente, então algumas bases não circulam exatamente. #c08081, por exemplo, volta como #c18182. a diferença é uma unidade por canal e invisível, mas importa se você estiver correspondendo exatamente a um código de marca: mantenha o HEX oficial para a base e use os gerados para o resto.
Usando todas as cores em todos os lugares. Uma paleta análoga de cinco cores é uma faixa para escolher, e não cinco cores que precisam de um trabalho.
Saltando contraste. Como mostrado acima, duas cores na mesma luminosidade HSL podem diferir mais de três vezes na luminância Verifique os pares de texto.
Esperando uniformidade perceptiva. Os passos de sombra estão mesmo na leveza HSL, não em quão leve eles parecem Se você precisa de uma escala que pareça uniforme, ajuste passos individuais a olho nu ou trabalhe em um espaço perceptivo como OKLCH, que CSS Color 4 também define.
Como isso se compara com outras ferramentas de cores?
A geração de paleta é uma etapa de um fluxo de trabalho mais longo A tabela mostra qual ferramenta se encaixa em cada etapa.
| Tarefa | ferramenta | O que isso lhe dá |
|---|---|---|
| Encontre ou experimente uma cor inicial | Coletor cor | HEX, RGB e HSL para qualquer cor |
| Construa um conjunto coordenado | Gerador paleta cores | Seis modos de harmonia, exportação CSS |
| Faça uma escala de granulação fina de uma cor | Gerador de tons de cor | Uma rampa dedicada de tonalidade e sombra |
| Misture duas cores | Misturador cores | Cores intermediárias entre duas entradas |
| Verifique a legibilidade do texto | Verificador contraste cor | Relação de WCAG e passar ou falhar |
Se a escala importa mais do que a harmonia, o guia para gerar tons e tonalidades vai mais fundo na construção de 50 a 900 rampas Cada ferramenta de cor está listada no hub de ferramentas coloridas.
O gerador é privado e funciona offline?
Sim. toda a matemática e renderização HSL são executadas no seu navegador com JavaScript Nada do que você digita é carregado e, depois que a página carrega, o gerador paleta continua trabalhando sem conexão de rede Copiar um swatch ou o CSS conta para um limite de uso diário, que registra o modo em que você estava, não suas cores.
