Design
Ferramentas de cor para designers e dev-adjacent
HEX ↔ RGB ↔ HSL converter, checker de contraste WCAG, geradores de paleta — para pixel-pushers e content creators que se importam com acessibilidade.
Conversor de cor e verificador de contraste
Conversor HEX ↔ RGB ↔ HSL com verificador de contraste WCAG AA/AAA.
Gerador de paleta de cores
Gere paletas harmonizadas: análoga, complementar, triádica, monocromática.
Verificador de Contraste WCAG
Verifique o contraste de cores conforme WCAG 2.2 AA/AAA — prévia ao vivo, razão exata e cor acessível sugerida automaticamente.
Gerador de gradientes CSS
Crie gradientes lineares, radiais e cônicos com quantas paradas de cor precisar. Copie o CSS com cor de reserva ou o valor arbitrário do Tailwind.
Gerador de box-shadow CSS
Empilhe quantas camadas de sombra precisar e veja-as em fundo claro e escuro ao mesmo tempo. Copie o CSS ou o valor arbitrário do Tailwind.
Gerador de clip-path CSS
Arraste os vértices de um polígono ou defina círculo, elipse ou inset, e copie a declaração clip-path. Doze formas prontas.
Quadro branco online
Desenhe diagramas e wireframes no navegador. Salvo apenas neste navegador, sem conta.
Gerador de Cubic Bezier
Arraste dois pontos de controle numa grade e veja um bloco animar com esse easing exato. Predefinições de CSS e de exagero, copie como transition-timing-function.
Simulador de daltonismo
Envie uma foto ou digite uma cor hex e veja com protanopia, deuteranopia, tritanopia ou acromatopsia. Comparador lado a lado com matrizes LMS de Brettel/Viénot-Mollon.
Visualizador STL/OBJ
Gire, dê zoom e inspecione um modelo 3D .stl ou .obj — triângulos, caixa delimitadora, volume estimado, modo wireframe, captura PNG. Roda no navegador.
Como escolher entre estas ferramentas
Três ferramentas em torno de uma pergunta: esta combinação de cores vai ser legível?
Contraste se mede, não se opina. A WCAG define uma razão a partir da luminância relativa de duas cores, e os limites são 4,5:1 para texto corrido e 3:1 para texto grande no nível AA. O verificador informa a razão e a aprovação ou reprovação em cada nível, que é a diferença entre uma revisão de design que termina em opinião e outra que termina em número.
O conversor move uma cor entre HEX, RGB, HSL e suas variantes com alfa sem o desvio de arredondamento que aparece ao converter duas vezes à mão, e o gerador de paletas monta harmonias a partir de uma cor base. Os dois rendem mais ao lado do verificador de contraste: escolha uma paleta e confirme que os pares sobre os quais você vai colocar texto passam do limite antes de irem para produção.