Cor → sistema de design

Insira uma cor e gere automaticamente uma paleta, um gradiente e uma verificação de contraste AA/AAA.

Cor → sistema de design — Um pipeline de cores interligado: um HEX flui para um gerador de paletas, cujas cores base e complementares alimentam um verificador de contraste (AA/AAA) e um gerador de gradientes CSS ao mesmo tempo. Escolha uma cor e obtenha todo um sistema de design.

Ferramentas incluídas

Conversor de cores

Converta cores entre HEX, RGB e HSL com uma pré-visualização em tempo real.

Gerador de paleta de cores

Gere tons, matizes e cores harmônicas a partir de uma cor HEX base, cada uma com um valor HEX copiável.

Verificador de contraste de cor

Verifique o contraste WCAG 2.1 e a pontuação APCA Lc entre uma cor de texto e de fundo, veja os selos AA, AAA e 3:1 e aplique a cor aprovada mais próxima.

Gerador de gradientes CSS

Crie gradientes CSS lineares, radiais e cônicos visualmente com uma barra de paradas arrastável, camadas, paletas aleatórias e uma regra pronta para copiar.