1
Insira qualquer formato
HEX, RGB, HSL, HSV ou CMYK
2
Veja os 5 formatos
Todos atualizam em tempo real
3
Copie e use
Clique para copiar para CSS, design, impressão
5 formatos — HEX, RGB, HSL, HSV, CMYK — edite qualquer um, todos atualizam em tempo real
HEX, RGB, HSL, HSV ou CMYK
Todos atualizam em tempo real
Clique para copiar para CSS, design, impressão
| Formato | Exemplo | Usado Em |
|---|---|---|
| HEX | #3B82F6 | CSS, HTML, web design — o formato de cor universal da web |
| RGB | rgb(59, 130, 246) | Ecrãs, monitores, design digital — cor aditiva (luz) |
| HSL | hsl(217, 91%, 60%) | CSS, sistemas de design — manipulação intuitiva de cor baseada em matiz |
| HSV | hsv(217, 76%, 96%) | Seletores de cores, edição de imagem (GIMP, Photoshop) — modelo artístico |
| CMYK | cmyk(76, 47, 0, 4) | Impressão, publicação — cor subtrativa (tinta no papel) |
RGB é cor aditiva: começa com preto (sem luz) e adiciona luz vermelha, verde e azul para criar cores. Com intensidade máxima, V+A+L = branco. Ecrãs, telemóveis e projetores usam RGB. CMYK é cor subtrativa: começa com papel branco e subtrai luz sobrepondo tinta ciano, magenta, amarela e preta. C+M+A deveriam teoricamente produzir preto, mas na realidade produzem um castanho turvo — daí a tinta K (Key/Preto) separada. O RGB tem uma gama mais ampla: muitas cores de ecrã vibrantes (verdes néon, azuis elétricos) não podem ser fisicamente reproduzidas com tintas CMYK. Ao projetar para ecrã e impressão, verifique sempre a pré-visualização CMYK para evitar alterações de cor dececionantes na impressora.
HSL (Matiz, Saturação, Luminosidade) é o modelo de cor nativo do CSS. Cores puras e vivas situam-se em L=50%. L=0% é preto; L=100% é branco. Isto torna o HSL perfeito para gerar tons claros (adicionar branco: aumentar L), tons escuros (adicionar preto: diminuir L) e tons suaves (reduzir S). HSV (Matiz, Saturação, Valor) é o modelo artístico, usado pelos seletores de cor do Photoshop e GIMP. Cores puras situam-se em V=100%. V=0% é preto. A saturação do HSV comporta-se mais como a mistura de tinta — adicionar branco reduz a saturação no HSV mas apenas altera a luminosidade no HSL. Nenhum está "correto" — são ferramentas diferentes para tarefas diferentes.
Insira o seu código HEX (ex.: #3B82F6) no campo HEX. O RGB atualiza instantaneamente: rgb(59, 130, 246). Cada par de dígitos hex = um canal: 3B=59 (R), 82=130 (G), F6=246 (B).
Insira os valores RGB — o HSL atualiza automaticamente. HSL é mais intuitivo: Matiz (0-360°) = posição no disco cromático, Saturação (0-100%) = intensidade, Luminosidade (0-100%) = brilho. As cores puras estão em L=50%.
RGB = luz aditiva (ecrã). CMYK = tinta subtrativa (impressão). O RGB tem uma gama de cores mais ampla — cores de ecrã vibrantes não podem ser reproduzidas exatamente em impressão. Este conversor mostra o equivalente CMYK teórico, mas os resultados reais de impressão dependem dos perfis de impressora/papel/tinta.
Ambos usam Matiz e Saturação mas diferem no brilho: Luminosidade HSL varia de preto→cor pura→branco (pura a 50%). Valor HSV varia de preto→cor pura (pura a 100%). O HSV é usado em seletores de cores (GIMP/Photoshop); o HSL é melhor para gerar tons claros e escuros em CSS.
Clique na pré-visualização de cor para abrir o seletor de cores nativo do seu navegador. Selecione qualquer cor visualmente e todos os 5 formatos atualizam instantaneamente. Também pode clicar em 'Cor Aleatória' para explorar combinações de cores.