Conversão de cores
#ca4e4e
≈ Chestnut Rose
Variações
O objetivo desta secção é produzir com precisão tons claros (com adição de branco puro) e sombras (com adição de preto puro) da cor selecionada, em incrementos de 10%.
Dica profissional: Utiliza sombras para os estados de foco e sombras, matizes para os destaques e fundos.
Sombras
Variações mais escuras criadas pela adição de preto à tua cor de base.
Tons claros
Variações mais claras criadas pela adição de branco à tua cor de base.
Casos de utilização comuns
- • Estados dos componentes da IU (hover, ativo, desativado)
- • Criar profundidade com sombras e realces
- • Criar sistemas de cores consistentes
Sugestão de sistema de design
Estas variações formam a base de uma paleta de cores coesa. Exporta-as para manter a consistência em todo o teu projeto.
Combinações de cores
Cada harmonia tem a sua própria atmosfera. Use as harmonias para criar combinações de cores que funcionam bem juntas.
Como utilizar
Clica em qualquer cor para copiar o seu valor hexadecimal. Estas combinações são matematicamente comprovadas para criar harmonia visual.
Porque é que é importante
As harmonias de cores criam equilíbrio e evocam emoções específicas nos teus desenhos.
Complementar
Uma cor e o seu oposto na roda de cores, +180 graus de matiz. Alto contraste.
Complementar dividida
Uma cor e duas adjacentes à sua complementar. Ousada como uma cor complementar direta, mas mais versátil.
Triádica
Três cores uniformemente espaçadas na roda de cores, cada uma com 120 graus de diferença. É melhor deixar uma cor dominar e usar as outras como destaque.
Análoga
Três cores com a mesma luminosidade e saturação, com matizes adjacentes na roda de cores, separadas por 30 graus. Transições suaves.
Monocromática
Três cores do mesmo matiz com valores de luminosidade +/-50%. Subtil e requintado.
Tetrádica
Dois conjuntos de cores complementares, separados por 60 graus de matiz.
Princípios da teoria da cor
Equilíbrio
Utiliza uma cor dominante, apoia-a com uma cor secundária e acentua-a com moderação.
Contraste
Assegura um contraste suficiente para facilitar a leitura e a acessibilidade.
Harmonia
As cores devem funcionar em conjunto para criar uma experiência visual unificada.
Verificador de Contraste de Cores
Testa as combinações de cores para garantir que cumprem as normas de acessibilidade WCAG para a legibilidade do texto.
Cor do texto
Cor de fundo
Contraste
Normas WCAG
Toda a gente é um génio. Mas se julgarmos um peixe pela sua capacidade de trepar a uma árvore, ele passará a vida inteira a acreditar que é estúpido.