Cada sistema de design que EU já enviei começou com uma única cor de marca e, em seguida, imediatamente precisava de mais uma dúzia Um azul nunca é suficiente Você precisa de um azul mais claro para um estado de pairar, um azul muito mais claro para um fundo de linha selecionada, um azul mais escuro para texto que fica em uma superfície pálida e um azul silenciado para um botão desativado que não deve gritar Quando EU estava construindo a interface para [Toolz.dev] (/, EU continuei abrindo um seletor de cores, empurrando o controle deslizante de luminosidade, eyeballing se o resultado ainda parecia a mesma família, e colando códigos hexadecimais na minha folha de estilo um de cada vez, funcionou, mas foi lento, e os resultados foram inconsistentes porque " nudge até que pareça certo " não é um processo repetível.
Então eu construí o Gerador de Tons de Cor. Você dá uma cor e três escalas completas, calculadas no espaço de cores Módulo de cores CSS nível 4 define em vez de cutucar dígitos hexagonais: tons que caminham em direção ao branco, tons que caminham em direção ao preto e tons que caminham em direção ao cinza Este guia explica o que essas três palavras realmente significam, como funciona a matemática e como transformar uma única cor de marca em uma paleta coerente que você pode colocar diretamente no CSS.
tl;dr: Uma tonalidade é a sua cor misturada com branco, uma tonalidade é a sua cor misturada com preto, e um tom é a sua cor misturada com cinza Cada um mantém a tonalidade original e só muda o quão clara, escura ou silenciada a cor parece Cole um valor HEX, RGB ou HSL, escolha quantas etapas você deseja e o gerador constrói todas as três escalas de uma só vez, cada amostra copiável como HEX, RGB ou HSL Tudo é executado em seu navegador.
Qual é a diferença entre uma tonalidade, uma tonalidade e um tom?
Estas três palavras vêm da teoria tradicional das cores, e elas descrevem três maneiras diferentes de mudar uma cor sem alterar qual cor ela fundamentalmente é A distinção vale a pena acertar porque os designers, e cada vez mais projetar tokens, usar as palavras com precisão.
Uma tonalidade é uma cor misturada com branco Adicionar branco aumenta a leveza e suaviza a cor Rosa é uma tonalidade de vermelho, e azul bebê é uma tonalidade de um azul mais forte Tintas são o que você alcança quando você precisa de fundos pálidos, preenchimentos sutis e as superfícies mais leves em uma interface.
Um tom é uma cor misturada com preto Adicionar preto diminui a leveza e aprofunda a cor Maroon é um tom de vermelho, e marinha é um tom de azul Tons dão-lhe a extremidade mais escura de uma escala: cores de texto, estados de botão pressionado, e bordas que precisam de mais peso do que a base.
Um tom é uma cor misturada com cinza Adicionar cinza reduz a cor & #39; s intensidade sem torná-lo dramaticamente mais claro ou mais escuro Os tons são os mais subutilizados dos três, e eles são o segredo por trás de paletas que parecem sofisticadas em vez de berrantes Uma cor atenuada lê como mais calmo e profissional, razão pela qual paletas silenciadas dominam o design de produtos sérios.
A coisa importante que todos os três compartilham é que eles preservam a tonalidade Uma tonalidade de azul ainda é azul, um tom de azul ainda é azul e um tom de azul ainda é azul É isso que faz um conjunto de tons, tons e tons parecer uma família em vez de uma variedade aleatória.
Como é que cada escala é realmente calculada?
Sob o capô, cada amostra é uma mistura em linha reta entre duas cores no espaço RGB O gerador toma sua cor base como um triplo vermelho, verde e azul, e ele leva uma cor alvo, então ele caminha de um para o outro em passos pares Para tonalidades o alvo é branco, que é (255, 255, 255). Para tons o alvo é preto, (0, 0, 0). Para tons o alvo é cinza médio, (128, 128, 128).
A mistura para qualquer canal único é aritmética simples Para obter uma amostra que é trinta por cento do caminho da base em direção ao alvo, você calcula base + (target - base) * 0.30 para o canal vermelho, depois o canal verde, depois o canal azul e redondo para números inteiros Uma escala de dez passos de tonalidade executa esse cálculo em dez por cento, vinte por cento e assim por diante até cem por cento, onde a cor se tornou branco puro A cor base em si está incluída como a faixa de zero por cento no topo de cada escala, para que você possa sempre ver onde começou.
Como a mistura acontece por canal no RGB, a tonalidade permanece essencialmente fixa para tons e tonalidades A mistura em direção ao branco puro ou preto puro muda a quantidade de luz que a cor reflete, mas não seu caráter subjacente, de modo que uma tonalidade e um tom da mesma base são lidos como a mesma cor com brilho diferente Os tons podem mudar a tonalidade percebida de um cabelo, porque o cinza fica no centro neutro e puxando em direção a ele dessatura ligeiramente todos os canais, mas na prática toda a escala ainda é lida como uma cor Se você quiser inspecionar exatamente como uma determinada amostra cai nos formatos, o Conversor Cor mostrará seus valores HEX, RGB, HSL e HWB lado a lado.
Por que não apenas mudar a leveza no HSL?
Uma questão razoável é por que a ferramenta se mistura em RGB, em vez de simplesmente aumentar ou diminuir o L valor em HSL. Ambas as abordagens produzem uma escala monocromática, e ambas são válidas Misturando em direção ao branco e preto em RGB é o modelo clássico de tintas e tons painter' s, e mapeia de forma limpa nas palavras que os designers já usam Também mantém os pontos finais honestos: uma tonalidade de cem por cento é exatamente branca e uma tonalidade de cem por cento é exatamente preta, o que nem sempre é verdade quando você manipula apenas a luminosidade HSL por causa de como a saturação interage com ela O gerador dá tons como uma terceira escala especificamente para cobrir o & quot; intensos & quot; eixo que uma mudança de luminosidade pura não aborda.
Quantos passos devo gerar?
O gerador permite escolher entre duas a vinte etapas por escala, e o número certo depende do que você está construindo. Para um sistema de design onde você deseja uma rampa nomeada blue-50 completo blue-900, uma contagem de passos maior dá-lhe um gradiente fino que você pode provar de Para um par rápido de hover e estados ativos, três ou quatro passos é a abundância Meu padrão é dez, porque dez tons, dez tons, e dez tons de uma base me dá uma paleta de trabalho completo sem uma parede esmagadora de amostras.
Mais passos significam saltos menores entre cores adjacentes, que é o que você quer quando tons vizinhos precisam ser visualmente distintos, mas próximos, como as bandas alternadas de uma tabela de dados Menos passos significam saltos mais ousados, o que se adapta a uma paleta compacta onde cada cor tem um trabalho claramente diferente Não há resposta errada, e porque a ferramenta recalcula instantaneamente você pode deslizar a contagem de passos para cima e para baixo até que o espaçamento pareça certo.
Como os tons diferem da redução da opacidade?
Uma armadilha em que caí cedo foi usar a opacidade para fingir uma tonalidade Parece equivalente: solte um botão azul para cinquenta por cento de opacidade sobre uma página branca e parece um azul mais claro O problema é que a opacidade não é uma cor, é uma instrução de composição, e depende inteiramente de tudo o que fica atrás do elemento Esse mesmo azul de cinquenta por cento sobre uma superfície escura torna-se um azul escuro lamacento, e sobre uma foto torna-se imprevisível Seu " azul claro & quot; muda de identidade dependendo do seu fundo, que é o oposto do que um sistema de design precisa.
Uma tonalidade resolve isso assando a leveza em uma cor real e opaca A amostra que o gerador lhe dá é um valor hexadecimal fixo que parece o mesmo, não importa o que esteja por trás disso, porque é totalmente opaco Quando você precisa de uma versão consistente mais clara de uma cor que se comporte previsivelmente em todas as superfícies do seu produto, use uma tonalidade em vez de uma transparência Reserve a opacidade para efeitos de transparência genuínos, como sobreposições e scrims, onde você realmente deseja que o fundo apareça. Manter essas duas ideias separadas é um dos hábitos silenciosos que faz uma paleta parecer sólida em vez de acidental.
Como faço para transformar essas escalas em uma paleta utilizável?
Uma paleta não é apenas uma pilha de cores, é um conjunto de atribuições Aqui está o fluxo de trabalho que EU uso quando EU começo a partir de uma única cor de marca Tome a base como sua cor de ação primária, a dos seus botões principais e links Alcance as tonalidades para fundos: uma tonalidade muito clara para superfícies de página ou cartão, uma tonalidade um pouco mais forte para o estado de pairar de um elemento de luz Alcance as tonalidades para texto e ênfase: uma tonalidade profunda para cópia do corpo que precisa de contraste contra uma tonalidade pálida, uma tonalidade média para o estado pressionado do seu botão primário Use um tom quando precisar da cor presente, mas silenciosa, como um controle desativado ou um crachá secundário.
A única regra que você não pode pular é o contraste Uma tonalidade que parece adorável como um fundo de botão é inútil se o texto do rótulo nele não atender aos requisitos de contraste de acessibilidade Uma vez que você tenha escolhido os pares de cores que ficarão em cima uns dos outros, execute-os através do Verificador de contraste de cores para confirmar eles limpar os limiares WCAG Escolher tons bonitos é a parte fácil Certificando-se de que o texto sobre eles é legível é a parte que separa uma paleta real de um quadro de humor.
A tabela abaixo mostra como normalmente mapeio uma escala de dez passos em funções de interface.
| Fonte Swatch | Papel típico | Exemplo uso |
|---|---|---|
| Tons mais leves | Superfícies e fundos | Fundo da página, preenchimento do cartão, linha selecionada |
| Tons leves | Hover afirma sobre elementos leves | O botão paira, o pairar do item de lista |
| Cor base | Ação primária | Botão principal, link ativo, destaque da marca |
| Tons médios | Estados pressionados e ativos | Botão ativo, fronteira focada |
| Tons escuros | Texto e alta ênfase | Texto do corpo em superfícies claras, títulos |
| Tons | Elementos secundários silenciados | Controles desativados, crachás secundários |
Como isso se encaixa ao lado de outras ferramentas de cores?
O gerador de tonalidades é um instrumento numa pequena orquestra Responde à pergunta & quot; dá-me mais desta cor, & quot; mas o trabalho real da paleta toca também algumas questões adjacentes Quando precisas de cores harmoniosas que não são a mesma tonalidade, como um conjunto complementar ou análogo, o gerador de paleta de cores constrói esses relacionamentos Quando você está amostrando uma cor inicial de uma imagem ou design e precisa ler seu valor exato, o seletor de cores obtém o código hexadecimal. E quando suas tonalidades são destinadas a um fundo CSS que desaparece de uma para outra, o gerador de gradiente transforma dois deles em prontos para colar linear-gradient.
O pipeline natural se parece com isto: escolha ou cole uma cor base, gere suas tonalidades, tonalidades e tons, verifique os pares que você planeja empilhar contra o verificador de contraste e copie os vencedores em sua folha de estilo ou tokens de design Cada uma dessas ferramentas é executada inteiramente no navegador, portanto, uma cor de marca que você ainda não anunciou nunca viaja para qualquer servidor & #39; s. Se o trabalho feito com ferramentas local-primeiro é um valor que você compartilha, a peça sobre Privacidade de dados e ferramentas online explica por que construo tudo dessa forma, e o Kit de ferramentas para desenvolvedores web coleta o restante dos utilitários que vivem no meu fluxo de trabalho diário.
Um exemplo rápido
Comece com a marca azul #4466EE. Defina a contagem de passos para dez e deixe o formato de cópia no HEX. O gerador retorna três colunas.
A coluna de tonalidades começa em #4466EE e sobe em direção ao branco, passando por azuis progressivamente mais claros até a faixa final #FFFFFF. Em algum lugar no meio você obtém uma pervinca suave que faz um excelente fundo de linha selecionada A coluna de tons começa da mesma forma #4466EE e desce em direção ao preto, dando-lhe indigos profundos adequados para texto e estados pressionados, terminando em #000000. A coluna de tons começa em #4466EE e se move em direção ao cinza, produzindo azuis ardósia suaves que parecem calmos e discretos, terminando em #808080.
A partir dessa entrada você agora tem um fundo (uma tonalidade clara), um preenchimento hover (uma tonalidade um pouco mais escura), uma cor primária (a base), uma cor de texto (uma tonalidade escura) e uma cor desativada (um tom).Clique em qualquer amostra para copiá-lo, mude o formato de cópia para RGB ou HSL se o seu projeto preferir aqueles e cole. O que costumava ser vinte viagens para um seletor de cores agora é uma pasta e um punhado de cliques e, como a matemática é determinística, a paleta é consistente a cada vez.
Perguntas frequentes
Qual é a diferença entre uma tonalidade, uma tonalidade e um tom?
Uma tonalidade é uma cor misturada com branco, tornando-a mais clara Uma tonalidade é uma cor misturada com preto, tornando-a mais escura Um tom é uma cor misturada com cinza, que a silencia sem alterar se é clara ou escura Todos os três mantêm a tonalidade original e só mudam o quão clara, escura ou saturada a cor aparece.
Como faço para gerar tons de uma cor?
Digite sua cor base, em seguida, leia a coluna de tons, que mistura a cor com quantidades crescentes de preto Cada linha é uma versão mais escura do original em um passo par, e você pode copiar qualquer um deles como HEX, RGB ou HSL Aumente a contagem de passos para uma faixa mais suave de valores escuros.
Como são calculadas as cores mais claras e escuras?
Cada escala é uma mistura linear da cor base em direção a um alvo As tonalidades se misturam em direção ao branco (255, 255, 255), os tons se misturam em direção ao preto (0, 0, 0) e os tons se misturam em direção ao cinza médio (128, 128, 128).Uma tonalidade de 30%, por exemplo, move cada canal vermelho, verde e azul 30% do caminho da base para o branco.
Em quais formatos de cores posso colar?
Você pode inserir um código HEX (3 ou 6 dígitos, com ou sem hash inicial), um valor rgb (), um valor hsl () ou um nome de cor CSS comum, como carmesim ou steelblue A ferramenta converte sua entrada para RGB internamente e relata cada amostra em HEX, RGB e HSL.
Quantas tonalidades posso gerar?
Você pode definir entre 2 e 20 passos por escala Cada escala também inclui a cor base original, então uma configuração de 10 passos dá a você a base mais dez tons, dez tons e dez tons Menos passos dão saltos em negrito entre os valores, enquanto mais passos dão um gradiente fino.
Posso construir uma paleta monocromática com esta ferramenta?
Sim. Uma paleta monocromática usa uma tonalidade em diferentes níveis de leveza e saturação, que é exatamente o que as tonalidades, tons e tons produzem Escolha uma cor de marca base e use suas tonalidades para fundos, a base para elementos primários e suas tonalidades para texto ou estados de pairar.
As cores geradas mantêm a mesma tonalidade?
Tons e tonalidades mantêm a tonalidade quase exatamente, porque a mistura com branco puro ou preto muda a leveza em vez da tonalidade Os tons podem mudar muito ligeiramente porque o cinza fica no centro do espaço de cores, mas para o trabalho prático de design, toda a escala é lida como uma família da mesma cor.
O gerador de tons de cores é gratuito e privado?
Sim. é totalmente gratuito sem inscrição e sem limites Toda a análise e matemática de cores são executadas no seu navegador usando JavaScript do lado do cliente, para que as cores inseridas nunca saiam do seu dispositivo e a ferramenta continue funcionando offline depois que a página for carregada.
