Crie paletas de cores a partir de uma cor base, copie HEX, RGB, HSL e variáveis CSS direto no navegador.
O gerador cria paletas em sRGB/HSL a partir de uma cor base. Ele mostra valores em HEX, RGB e HSL, além de uma opção para copiar variáveis CSS.
Digite uma cor HEX ou use o seletor, escolha o modo de harmonia e ajuste a quantidade de cores. O link compartilhado recria a mesma paleta com cor, modo e quantidade, sem salvar histórico ou favoritos.
A paleta é calculada em sRGB/HSL no navegador a partir da cor informada.
Aceita #RRGGBB, RRGGBB, #RGB ou RGB.
Usa cores próximas no círculo HSL para uma combinação suave.
Resumo
5 cores a partir de #2F80ED, no modo Analógica.
Cada cartão mostra valores em HEX, RGB e HSL. Os rótulos ficam fora da cor para evitar leitura ruim.
Cor 1
#2F80ED
#2F80EDrgb(47, 128, 237)hsl(214, 84%, 56%)Cor 2
#28EAD8
#28EAD8rgb(40, 234, 216)hsl(174, 82%, 54%)Cor 3
#3ED3F2
#3ED3F2rgb(62, 211, 242)hsl(190, 87%, 60%)Cor 4
#1C91D8
#1C91D8rgb(28, 145, 216)hsl(203, 77%, 48%)Cor 5
#4A6FF1
#4A6FF1rgb(74, 111, 241)hsl(227, 86%, 62%)Os modos analógico, complementar e triádico giram o matiz em torno do círculo HSL e ajustam saturação ou luminosidade.
Tons variam principalmente a luminosidade; monocromático mantém o matiz e combina variações de saturação e luminosidade.
A ferramenta usa apenas cor, modo e quantidade na URL. Ela não salva paletas em favoritos, localStorage ou servidor.
Comece com uma cor que já represente o projeto, como uma cor de marca, imagem ou preferência visual. O botão aleatório ajuda quando você quer explorar.
HEX é compacto para CSS e design; RGB mostra canais vermelho, verde e azul; HSL separa matiz, saturação e luminosidade, facilitando variações.
Não necessariamente. Esta ferramenta sugere combinações visuais e não faz auditoria de contraste, WCAG ou legibilidade para textos.
Não. A paleta é gerada no navegador. O link compartilhado guarda apenas cor base, modo e quantidade.
Sim. Copie os valores individuais ou o bloco de variáveis CSS e ajuste os nomes conforme seu projeto.