Selector de Cores
Escolha uma cor e receba-a em cinco graus de claro e escuro, prontos a colar numa folha de estilos.
Resultados
O que faz esta ferramenta
Escolha a cor no quadrado — abre-se o selector do seu próprio sistema, com conta-gotas na maioria dos sistemas, para poder tirar uma cor directamente do ecrã — e ela volta numa fila de cinco: dois graus mais escura, a cor em si, e dois graus mais clara. É esse o conjunto de trabalho para quase tudo o que se esteja a construir, porque uma cor sozinha não tem estado de passagem, nem estado de carregado, nem fundo.
Fórmula
mantém a matiz e faz variar a luminosidade em cinco passos
Variáveis
| Símbolo | Significado | Unidade |
|---|---|---|
color | Escolha uma cor | — |
OUT | Tons claros e escuros | — |
S1 | Dois graus mais escura | — |
S2 | Um grau mais escura | — |
S3 | A própria cor | — |
S4 | Um grau mais clara | — |
S5 | Dois graus mais clara | — |
Exemplo resolvido
- Escolha uma cor#2e6f9e
- Tons claros e escuros#0e212f #1e4867 #2e6f9e #4994ca #81b5da
- Dois graus mais escura#0e212f
- Um grau mais escura#1e4867
- A própria cor#2e6f9e
- Um grau mais clara#4994ca
- Dois graus mais clara#81b5da
Limitações
- O cálculo é feito inteiramente no seu navegador. Os valores que introduz nunca são enviados para um servidor.
Perguntas frequentes
Porquê cinco graus da mesma cor?
Porque uma cor sozinha nunca chega para construir seja o que for. Um botão precisa de uma versão mais escura para o estado carregado e de uma mais clara para o fundo onde assenta, um gráfico precisa de vários tons que se leiam como a mesma família, e uma tabela precisa de um tom suficientemente pálido para riscar as linhas sem gritar. Fazer variar a luminosidade mantendo a matiz e a saturação quietas é o que faz com que os cinco continuem a ser reconhecivelmente a mesma cor.