Conversor de formatos de cor
Converta uma cor entre HEX, RGB, HSL e CMYK com pré‑visualização em tempo real (pré‑visualização no desktop)
HEX
#
RGB
R
G
B
HSL
H
S
L
CMYK
C
M
Y
K
Dica: arraste as letras dos canais para ajuste fino
Visualização
🚀 Início rápido
- Escolher/introduzir: escreva qualquer formato suportado (#1E90FF, rgb(30,144,255), hsl(210,100%,56%)) ou use o seletor de cor
- Conversão automática: ao introduzir num formato, os restantes actualizam‑se de imediato
- Copiar: use o botão de cópia junto a cada formato para obter a cadeia normalizada
📌 Cenários comuns
- Handoff de design: converter HEX das maquetas para RGB/HSL de CSS
- Guia de estilo: unificar formatos de cor e convenções de escrita na biblioteca de componentes
- Referência de impressão: converter a cor do ecrã para CMYK como estimativa inicial (requer prova)
- Acessibilidade: usar a pré‑visualização para uma leitura rápida do contraste (para rácios exactos, recorra a ferramenta dedicada)
🎛️ Parâmetros de conversão e exibição
- Regras de entrada: HEX somente 6 dígitos (sem alpha); RGB 0–255; H 0–360; S/L 0–100; CMYK 0–100. Insensível a maiúsculas/minúsculas
- Pré‑visualização: no desktop há pré‑visualização à direita; no mobile não é exibida
- Seletor de cor: botão de paleta no canto superior direito de cada cartão
- Política de maiúsculas do HEX: saída normalizada em maiúsculas (ex.: #1E90FF); entrada insensível a maiúsculas/minúsculas; sem alternância
- Ajuste fino: arraste as letras dos canais para esquerda/direita (Shift×10, Alt÷0.1)
- Saída de cópia: o botão copiar gera strings padronizadas (HEX em maiúsculas)
🧭 Boas práticas de uso
- Precisão: a gestão de cor varia por dispositivo; o conta‑gotas pode devolver valores ligeiramente diferentes entre aplicações
- Alfa: os formatos actuais não incluem alfa; use rgba()/hsla() ou canal separado
- Espaço de cor: na Web o padrão é sRGB; em P3/Display‑P3 valide com cuidado
- Consistência: acordar em equipa um formato canónico no CSS (p.ex., HSL)
⚠️ Riscos & limitações
- Variação por dispositivo: monitores/navegadores/SO gerem a cor de forma distinta; o aspecto pode variar
- CMYK aproximado: valores indicativos; para impressão real utilize perfis ICC e fluxo dedicado
- Sem alfa: esta ferramenta não processa transparência
🔒 Privacidade e segurança
- Todo o processamento ocorre no seu navegador; os dados não saem do seu dispositivo
- Sem persistência: entradas/histórico são limpos ao fechar a página salvo guarda explícita
❓ Perguntas frequentes
O atalho #RGB é suportado?
Ainda não; utilize HEX de 6 dígitos (#RRGGBB).
Quais os intervalos de RGB e HSL?
RGB: 0–255 (inteiros); H: 0–360, S/L: 0–100%
Porque é que o CMYK difere do resultado impresso?
CMYK depende de papel, tinta, dispositivo e perfis ICC; aqui são valores aproximados — é necessária prova
Suporta canal alfa (rgba()/hsla())?
No momento não; use rgba()/hsla() ou mantenha o alfa separadamente.
Por que a prévia/valores diferem dos de apps/navegadores?
Gestão de cores, renderização e calibração variam. A ferramenta calcula em sRGB; resultado indicativo.
Há suporte para gama ampla (P3/Display‑P3)?
Atualmente baseado em sRGB; em fluxos P3 valide no dispositivo alvo e com perfis ICC.
Posso converter CMYK para HEX/RGB?
É possível, mas CMYK→tela é aproximado; impressão séria requer perfis ICC e provas.