Painel de cores
Gerador de Tom Claro
Clareie uma cor misturando-a com branco.
Gerador de Tom Claro: TOEA aplica esta fórmula fixa: Tint = color × (1 − amount) + white × amount. O cálculo de cor é executado localmente no seu navegador. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.
- Categoria
- Ferramentas do dia a dia
- Execuções
- No seu navegador
- Custo
- Grátis · sem cadastro
- Disponibilidade
- Pronto para usar
HEX clareado
#5C8AF0
- RGB clareado
- rgb(92, 138, 240)
Tom = cor × (1 − quantidade) + branco × quantidade- Os resultados são transformações matemáticas sRGB determinísticas; a aparência na tela depende do seu monitor e do perfil de cor.
- A entrada HEX aceita a notação #RGB ou #RRGGBB. Os valores permanecem no seu navegador e não são enviados.
Criando uma escala clara
Sistemas de design costumam criar seus tons mais claros misturando a cor com branco; o tint-color() do Bootstrap funciona assim. Tons com cerca de 80–95% de branco criam fundos para alertas, linhas selecionadas e badges, enquanto 20–40% produz uma versão mais suave da cor da marca para preenchimentos ao passar o cursor e ilustrações. Gere cada etapa a partir da base original, em vez de aplicar o tom sobre outro tom, para que as porcentagens continuem fazendo sentido, e mantenha a própria base para textos ou ícones nas etapas mais claras.
Por que os tons claros podem parecer esbranquiçados
Adicionar branco reduz a saturação e aumenta a luminosidade, então tons claros podem parecer leitosos; os azuis, em particular, podem tender ao lavanda. Se uma etapa clara não parecer adequada, tente uma base um pouco mais saturada ou defina a luminosidade diretamente no conversor de cores e compare. Textos escuros passam no teste de contraste com mais facilidade à medida que o tom fica mais claro; verifique a combinação usada no verificador de contraste.
Como usar
- Informe valores #RGB ou #RRGGBB válidos e a porcentagem solicitada.
- Execute a operação fixa de cor local ao navegador.
- Revise as amostras e copie o resultado ou os valores da paleta.
Privacidade e limitações
Os valores de cor permanecem neste dispositivo. O resultado de contraste é um verificador matemático, não uma garantia ampla de conformidade com a WCAG; contexto, renderização de fontes, contraste de elementos não textuais e estados da interface ainda precisam ser revisados.
Ferramentas relacionadas
Perguntas frequentes
Como o Gerador de Tom Claro funciona?
Ele usa Tint = color × (1 − amount) + white × amount.
Quais formatos HEX são aceitos?
Use a notação sRGB #RGB de três dígitos ou #RRGGBB de seis dígitos. Canais alfa e nomes de cores não são aceitos.
O resultado de contraste garante conformidade com acessibilidade?
Não. É um verificador matemático de contraste para as cores informadas e os limiares de texto, não uma garantia ampla de conformidade.
Ferramenta grátis · no seu navegador execuções · não precisa de conta