Arraste qualquer paleta de 5 cores para três interfaces reais — painel, página de destino, aplicativo móvel — e veja-a como um produto real. As funções são atribuídas automaticamente: primária, destaque, superfície e texto encontram seu lugar.
Editar paleta (clique em uma amostra para substituir)
Cinco cores inseridas em três interfaces reais, com funções atribuídas automaticamente.
Clique em "Visualizar" em qualquer paleta da comunidade ou no painel de paletas para carregá-la, ou edite manualmente os cinco valores HEX.
O motor atribui primária, secundária, destaque, superfície e texto com base na luminosidade e croma - veja onde cada uma se encaixa em cada maquete.
Alternar entre painel, página de destino e aplicativo móvel em tempo real; clique em qualquer amostra para substituir uma cor no local.
Quatro perguntas que as pessoas realmente fazem sobre a pré-visualização de paletas.
Continue a partir daqui e coloque as cores para funcionar.
Barra de espaço para aleatorizar, travar, arrastar para reordenar, compartilhar por URL — tudo o que um painel de paletas deve fazer.
Transforme qualquer cor em uma escala de sistema de design de 11 passos, perceptualmente uniforme em OKLCH, com contraste WCAG por passo, exportação para Tailwind/CSS/SCSS/JSON.
Validação de contraste WCAG 2.1 entre qualquer cor de primeiro plano e plano de fundo.
Descreva uma cena ou humor em uma linha — obtenha uma paleta de cinco tons com justificativa.