Cores UI Prontas
Explore 360 cores testadas para interfaces de usuário. Copie códigos em HEX, RGB ou classes de Tailwind CSS com um clique.
Coleções de design de interface
Essencial UI Studio
Cítrico e Néon
Pastel Contemporâneo
Boutique e Especiarias
Minimalista Nórdico
Pacífico e Glaciar
Oceano e Pôr do Sol
Crepúsculo e Veludo
Ateliê Alta-Costura
Terra e Fogo
Bauhaus Industrial
Seda e Jade Imperial
Silicon Pop Digital
Metrópole e Realeza
Obsidiana e Néon Digital
Terminal e Código Esmeralda
Cupertino e Sistema Cristal
Aurora e Gradiente Digital
Catálogo de cores para web design e aplicativos (360 tons de UI)
Escolher as cores certas para um projeto digital geralmente leva horas de testes frustrantes: tons excessivamente brilhantes que cansam os olhos, contrastes que não atendem à acessibilidade ou combinações incompatíveis de botões, textos e planos de fundo.
Este catálogo reúne 18 paletas internacionais e 360 tonalidades calibradas especificamente para interfaces digitais. Cada cor inclui sua versão clara e sua versão profunda para estados de foco ou fundos, com nomes em espanhol e cópia instantânea para a área de transferência em variáveis HEX, RGB, HSL ou CSS.
Comparação antes e depois
Confira a diferença em tamanho de arquivo, qualidade visual e velocidade.
Inconsistencia visual
Cores saturadas sem harmonia cromática
- •Contrastes que não cumprem os regulamentos de acessibilidade WCAG.
- •Status de botões e cartões pouco legíveis no modo escuro.
- •Perda de tempo convertendo códigos entre HEX, RGB e CSS.
360 Tonos calibrados
Harmonia visual garantida em qualquer tela
- ✓Pares cromáticos projetados para texto e fundo.
- ✓Cópia instantânea para variáveis HEX, RGB, HSL ou CSS.
- ✓Nomes em espanhol para organizar seus estilos com clareza.
Como aproveitar essas paletas em seus designs
Design de página da web e aplicativo
Encontre cores primárias, secundárias e de fundo que funcionem bem juntas sem sobrecarregar a tela.
Botões e estados de foco
Use pares de tons mais claros e mais escuros para criar estados normais e pairar naturalmente.
Gráficos e painéis de dados (dashboards)
Cores diferenciadas para exibir barras, métricas e estatísticas claramente visíveis à primeira vista.
Perguntas frequentes sobre paletas de cores
Cópia HEX para layout geral ou Figma. Use RGB se precisar ajustar a transparência. Use variáveis CSS se estiver programando um site para poder alterar facilmente os temas ou paletas de um único site.
Cada coluna contém dois tons relacionados: uma versão mais clara na parte superior e uma versão mais profunda na parte inferior, destinadas a combinar como plano de fundo e elemento principal.
Sim, todas as paletas e códigos de cores são totalmente gratuitos para uso em projetos pessoais, profissionais e comerciais.
Use o mecanismo de busca acima para digitar uma cor (por exemplo, “azul”, “esmeralda” ou “laranja”) ou digite um código hexadecimal para encontrar tons semelhantes instantaneamente.