Seletor e conversor de cor
Escolha uma cor e converta-a entre HEX, RGB, HSL e OKLCH.
⚠ This OKLCH value falls outside the sRGB gamut and was clamped.
Pick a color from an image
WCAG contrast
Color schemes & harmonies
Tints & shades
Color blindness simulation
Runs entirely in your browser. Nothing is uploaded.
Um conversor e seletor de cores gratuito que funciona inteiramente no seu navegador
Este conversor de cores gratuito transforma qualquer cor em todos os formatos de que necessita, instantaneamente. Cole um código hex, escreva um valor RGB, arraste a roda de cores ou recolha um píxel com o conta-gotas — e veja o resultado em HEX, RGB, HSL, HSV, CMYK e OKLCH simultaneamente. Cada campo é editável e bidirecional: altere um formato e todos os outros atualizam-se em tempo real sem recarregar a página, sem pedidos ao servidor e sem demoras.
Sites como ColorHexa.com, RapidTables, convertingcolors.com e cssgradient.io cobrem partes disto: ColorHexa mostra desdobramentos detalhados por URL, RapidTables fornece conversores de formato único em páginas separadas, convertingcolors suporta espaços de cor de nicho como CIELab e XYZ, e cssgradient é concebido especificamente para a geração de gradientes CSS. Esta ferramenta combina os casos de uso do quotidiano — conversão de formatos, seleção visual, verificação de acessibilidade e geração de paletas — numa interface em tempo real onde introduz uma cor uma vez e vê tudo de uma vez. Nada é carregado; todo o processamento é local.
Converta HEX, RGB, HSL, HSV, CMYK e OKLCH — bidirecional e instantaneamente
Cada campo é editável e mantém-se sincronizado. Cole um código hex e os valores RGB, HSL, HSV, CMYK e OKLCH atualizam-se no momento. Altere qualquer um e os restantes seguem imediatamente. Isso torna-o simultaneamente num rápido conversor de hex para RGB, uma ferramenta de RGB para hex, um conversor de RGB para CMYK e um conversor de HSL/HSV/OKLCH numa única vista — ideal quando um ficheiro de design lhe fornece um formato mas a sua folha de estilos, trabalho de impressão ou sistema de design precisa de outro.
Todas as saídas são valores HTML e CSS válidos — #hex, rgb(…), hsl(…), hsv(…), cmyk(…) e oklch(…) — cada um com um botão de cópia com um clique. A ferramenta também identifica a cor CSS nomeada mais próxima, para que possa descrever um tom instantaneamente ou confirmar se um hex personalizado corresponde a uma palavra-chave padrão. Ao contrário das páginas de conversão única do RapidTables, nunca precisa de navegar entre ferramentas separadas para pares de formatos diferentes.
Selecione uma cor a partir de uma imagem — ou diretamente do seu ecrã
Precisa da cor exata de uma foto, logótipo, captura de ecrã ou maquete? Use o seletor de cor de imagem: carregue um ficheiro, arraste-o ou cole-o da sua área de transferência (Ctrl+V / Cmd+V), depois mova sobre a imagem e clique para capturar qualquer píxel. Uma lupa amplificadora integrada faz zoom para uma seleção perfeita de píxeis, e cada cor em que clica é guardada numa faixa 'selecionadas da imagem' para que possa construir uma paleta a partir de uma única imagem sem perder seleções anteriores. A imagem é processada localmente usando um canvas HTML e nunca sai do seu dispositivo — funciona em todos os navegadores incluindo Firefox e Safari.
Prefere capturar uma cor de outro local do seu ecrã? O conta-gotas recolhe qualquer píxel do seu ecrã no Chrome 95+ e Edge 95+ através da API EyeDropper nativa — clique nele, aponte para qualquer píxel no ecrã e essa cor carrega-se em todos os campos instantaneamente. Uma faixa de cores recentes e a roda de cores interativa completam as opções de seleção, tudo sem instalar nada. Esta capacidade de seleção vai muito além do que ColorHexa, RapidTables ou convertingcolors oferecem.
Esquemas de cor, harmonias, tons e sombras
Transforme uma cor numa paleta completa. A ferramenta gera seis esquemas de cor baseados em harmonias da roda de cores: complementar, análogo, triádico, tetrádico, split-complementar e monocromático. Clique em qualquer amostra para torná-la a nova cor base e continue a explorar, pelo que a ferramenta funciona como um rápido gerador de paletas de cores para construir combinações coesas e em sintonia com a marca.
A escala de tons e sombras produz uma gama de passos mais claros e mais escuros a partir da sua cor base — útil para estados hover, estados ativos, estados desativados, bordas e fundos. Clicar em qualquer passo torna-o a cor ativa e mostra o seu desdobramento completo de formatos. Tanto a geração de paletas como a escala de tons/sombras atualizam-se instantaneamente em cada alteração de cor sem pedidos ao servidor — ao contrário de ferramentas de design na nuvem como Adobe Color ou Coolors, que requerem um pedido de rede para gerar resultados.
Verificação de contraste WCAG e simulação de daltonismo
A acessibilidade está integrada em cada escolha de cor. O verificador de contraste WCAG calcula a relação de contraste baseada em luminância da sua cor em relação ao branco e ao preto, depois mostra distintivos de aprovação/reprovação AA e AAA para texto normal, texto grande e componentes de UI — os três níveis WCAG 2.1 que determinam se um par de primeiro plano/fundo cumpre os padrões de acessibilidade. Atualiza-se em tempo real à medida que ajusta a cor, para que possa iterar em direção à conformidade sem mudar para uma ferramenta separada.
O simulador de daltonismo pré-visualiza a sua cor como a veem pessoas com protanopia, deuteranopia, tritanopia e acromatopsia — calculado usando o algoritmo de simulação padrão de Brettel/Viénot e atualizado em tempo real. Juntas, a verificação de contraste e a simulação de daltonismo ajudam a garantir que as suas escolhas de design permaneçam significativas e distinguíveis para cada espectador. Estas funcionalidades tornam esta ferramenta mais completa do que ColorHexa, RapidTables ou convertingcolors para decisões de cor centradas na acessibilidade.
Compreender o OKLCH — o futuro das cores em CSS
OKLCH é um espaço de cor perceptualmente uniforme que chegou ao CSS mainstream através da especificação CSS Color Level 4. Representa as cores como Luminosidade (L), Croma (C) e Matiz (H), onde a Luminosidade está calibrada para a perceção humana em vez de para a energia de luz linear. Isso significa que duas cores com o mesmo valor L parecerão igualmente claras ao olho humano independentemente do seu matiz — algo que não é verdade em HSL ou RGB. Para designers que constroem paletas sistemáticas, isso significa que pode definir um único valor L para 'fundo primário', aplicá-lo a cada matiz na sua paleta e obter resultados visualmente equilibrados sem ajuste manual.
OKLCH também descreve uma gama maior do que sRGB — pode representar cores Display P3 e Rec.2020 que estão além do triângulo sRGB usado pela maioria dos valores hex, RGB e HSL. Os navegadores modernos (Chrome, Safari, Firefox) agora suportam a função CSS oklch() nativamente, tornando OKLCH o formato com visão de futuro para o trabalho de cor em CSS. Esta ferramenta mostra um aviso de gama quando o valor OKLCH que introduziu cai fora do intervalo sRGB e seria limitado por navegadores mais antigos, dando-lhe um alerta antecipado antes de implementar em produção.
Uma alternativa gratuita ao seletor de cores do Google, Adobe Color e ferramentas online
A maioria dos seletores de cores está enterrada dentro de algo maior. O seletor de cores do Google só aparece em resultados de pesquisa para consultas específicas e não pode ser adicionado aos favoritos nem usado de forma independente. O seletor de cores da Adobe vive dentro do Photoshop, Illustrator ou Adobe Color (color.adobe.com), que requer uma conta Adobe e sincroniza dados com os servidores da Adobe. ColorHexa e RapidTables são sites de referência em vez de ferramentas interativas. convertingcolors.com cobre espaços de cor de nicho mas carece de funcionalidades de seleção e paleta. cssgradient.io é excelente para geração de gradientes mas não para gestão de cores individuais.
Este é um seletor e conversor de cores gratuito e independente que abre com um clique, funciona em qualquer dispositivo, nunca lhe pede para iniciar sessão e corre inteiramente no seu navegador. Quer seja um programador a combinar um hex de marca, um designer a afinar uma paleta HSL, um profissional de impressão a verificar aproximações CMYK ou um engenheiro de acessibilidade a verificar as relações de contraste WCAG — esta ferramenta faz todo o trabalho numa página rápida e privada. O suporte OKLCH, a verificação de acessibilidade e a geração de paletas estão incluídos por predefinição, funcionalidades pelas quais a maioria das alternativas cobra ou simplesmente não oferece.
Frequently asked questions
Este conversor de cores é gratuito?
Sim — completamente gratuito sem registo, sem conta e sem limites de utilização. Funciona inteiramente no seu navegador, pelo que as cores que escolhe, cola ou recolhe nunca saem do seu dispositivo. Não há nada para instalar e não é necessária subscrição. Todas as funcionalidades — conversão, conta-gotas, seletor de imagem, verificação de contraste WCAG, tons e sombras, simulação de daltonismo e geração de esquemas de cor — estão disponíveis gratuitamente na primeira visita.
Como converto um código HEX para RGB?
Cole o seu código hex (com ou sem o # inicial) no campo HEX e os valores RGB, HSL, HSV, CMYK e OKLCH atualizam-se instantaneamente. Por exemplo, cole #3b82f6 e verá imediatamente rgb(59, 130, 246) no campo RGB e hsl(217, 91%, 60%) no campo HSL. Cada formato fica sincronizado — só precisa de introduzir uma cor uma vez. A conversão é bidirecional: escreva um valor RGB e o HEX e todos os outros campos atualizam-se da mesma forma.
Que formatos de cor pode esta ferramenta converter?
A ferramenta converte bidirecionalmente entre seis formatos: HEX (o código #rrggbb usado em HTML e CSS), RGB (valores vermelho-verde-azul de 0 a 255), HSL (matiz 0-360°, saturação e luminosidade como percentagens), HSV/HSB (matiz-saturação-valor, o modelo usado na maioria dos seletores de cores de aplicações de design), CMYK (percentagens de ciano-magenta-amarelo-preto para pré-visualização de impressão) e OKLCH (um espaço de cor moderno perceptualmente uniforme). Altere qualquer campo e os outros cinco atualizam-se instantaneamente.
Posso selecionar uma cor a partir de uma imagem ou fotografia?
Sim — este é um seletor de cor de imagem completo. Carregue uma foto, arraste-a ou cole-a da sua área de transferência (Ctrl+V / Cmd+V), depois passe o cursor sobre a imagem e clique para capturar a cor exata de qualquer píxel. Uma lupa amplificadora faz zoom para uma seleção perfeita de píxeis. A imagem é processada localmente no seu navegador usando um canvas HTML e nunca é carregada para nenhum servidor.
Verifica o contraste para acessibilidade (WCAG)?
Sim. O verificador de contraste WCAG calcula a relação de contraste baseada em luminância entre a sua cor escolhida e fundos brancos e pretos, e mostra distintivos de aprovação/reprovação AA e AAA para texto normal, texto grande e componentes de UI. WCAG AA requer uma relação de 4.5:1 para texto normal (3:1 para texto grande); WCAG AAA requer 7:1 (4.5:1 para texto grande). O verificador atualiza-se em tempo real à medida que ajusta qualquer campo de cor.
O que é o OKLCH e por que devo usá-lo?
OKLCH é um espaço de cor moderno e perceptualmente uniforme introduzido no CSS Color Level 4. Ao contrário do RGB ou HSL, onde mudanças numéricas iguais não produzem diferenças igualmente percebidas pelo olho humano, o OKLCH está calibrado para que aumentar ou diminuir o valor de luminosidade (L) numa quantidade fixa produza um resultado visualmente consistente independentemente do matiz. Isso torna-o ideal para construir paletas de cores acessíveis e equilibradas. O OKLCH também pode representar cores de gama alargada (Display P3) e é suportado nativamente nos navegadores modernos.
O seletor de cores funciona em iPhone e Android?
Sim. Toda a ferramenta funciona em qualquer navegador móvel moderno — Safari no iPhone/iPad e Chrome no Android. A roda de cores, os campos de entrada de formato, o seletor de cor de imagem, o verificador de contraste WCAG, a escala de tons/sombras e o gerador de esquemas de cor funcionam normalmente em dispositivos móveis. O conta-gotas de ecrã não está disponível em navegadores móveis (é uma API exclusiva do Chrome/Edge em computadores), mas o seletor de imagem e a colagem da área de transferência funcionam perfeitamente em dispositivos móveis.
Related tools
Ver todas as ferramentas
Novo Gerador de glassmorphism
Desenhe um cartão de vidro fosco e copie o CSS, com pré-visualização ao vivo.
Novo Gerador de text-shadow CSS
Ajuste uma sombra de texto CSS com pré-visualização ao vivo e copie o código.
Novo Misturador de cores
Misture duas cores em qualquer proporção e copie o resultado ou qualquer passo.
Novo Seletor de cores de imagem
Escolha qualquer cor de uma imagem e extraia a paleta dominante em HEX, RGB e HSL.
Novo Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Novo Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.