Artigo completo
Escolher e converter cores é uma tarefa quotidiana no design gráfico e no desenvolvimento web. Diferentes contextos exigem diferentes representações: enquanto o CSS aceita HEX, RGB e HSL, o Canvas HTML privilegia RGB, e ferramentas de design como Figma ou Sketch trabalham nativamente em HSL ou HSV. Este color picker centraliza todas essas representações num único ecrã e converte-as em tempo real.
O modelo HEX é o mais popular na web por ser compacto e universal. Consiste em seis dígitos hexadecimais que representam os canais vermelho, verde e azul. O modelo RGB é a mesma informação expressa em decimal (0 a 255) e admite uma extensão com transparência — RGBA — em que o quarto valor entre 0 e 1 indica opacidade.
HSL (Hue, Saturation, Lightness) e HSV (Hue, Saturation, Value) são modelos mais intuitivos para humanos. Ambos separam o matiz — o tipo de cor em graus (0 a 360) — da saturação e da claridade. HSL usa Luminosidade, em que 50% corresponde à cor pura e 0/100% ao preto/branco. HSV usa Valor, em que a partir do máximo apenas escurece. HSL é preferido para paletas equilibradas; HSV para trabalho fotográfico e picking clássico estilo Adobe.
A ferramenta guarda automaticamente as cores utilizadas num histórico local. Isto acelera trabalhos em que reutiliza a mesma paleta várias vezes ao dia. Nenhuma informação é enviada para servidores — tudo fica no seu próprio navegador, disponível apenas no seu dispositivo.
O canal alfa é fundamental para efeitos modernos como vidro fosco, sobreposições semi-transparentes e sombras suaves. Ajuste o valor entre 0 (transparente) e 1 (opaco) e copie o RGBA já formatado. Nas versões mais recentes de CSS existe também a sintaxe hex de 8 dígitos (#RRGGBBAA) e a função color() para espaços de cor além de sRGB — o nosso color picker foca-se nos formatos mais compatíveis com todos os navegadores atuais.
Combine esta ferramenta com o Gerador de Paletas de Cores para desenvolver esquemas completos e com o Gerador de Gradientes CSS para transformar essas cores em fundos e efeitos dinâmicos. Todos disponíveis gratuitamente, sem registos, direto no navegador.