Seletor e conversor de cor
Escolha uma cor e converta 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 roda completamente no seu navegador
Este conversor de cores gratuito transforma qualquer cor em todos os formatos que você precisa, na hora. Cole um código hex, digite um valor RGB, arraste a roda de cores ou capture um pixel com o conta-gotas — e veja o resultado em HEX, RGB, HSL, HSV, CMYK e OKLCH simultaneamente. Cada campo é editável e bidirecional: mude um formato e todos os outros atualizam em tempo real sem recarregar a página, sem requisições ao servidor e sem demora.
Sites como ColorHexa.com, RapidTables, convertingcolors.com e cssgradient.io cobrem partes disso: ColorHexa mostra detalhamentos 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 é voltado especificamente para geração de gradientes CSS. Esta ferramenta combina os casos de uso do dia a dia — conversão de formatos, seleção visual, verificação de acessibilidade e geração de paletas — em uma interface ao vivo onde você insere uma cor uma vez e vê tudo de uma vez. Nada é enviado; todo o processamento é local.
Converta HEX, RGB, HSL, HSV, CMYK e OKLCH — bidirecional e instantâneo
Cada campo é editável e fica em sincronia. Cole um código hex e os valores de RGB, HSL, HSV, CMYK e OKLCH atualizam na hora. Mude qualquer um e os demais seguem imediatamente. Isso o torna simultaneamente um 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 em uma única tela — ideal quando um arquivo de design lhe dá um formato mas 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 copiar com um clique. A ferramenta também identifica a cor CSS nomeada mais próxima, para que você 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, você nunca precisa navegar entre ferramentas separadas para pares de formatos diferentes.
Capture uma cor de uma imagem — ou direto da sua tela
Precisa da cor exata de uma foto, logotipo, screenshot ou mockup? Use o seletor de cor de imagem: faça upload de um arquivo, arraste e solte, ou cole da sua área de transferência (Ctrl+V / Cmd+V), depois passe o mouse sobre a imagem e clique para capturar qualquer pixel. Uma lupa ampliadora integrada dá zoom para uma seleção pixel a pixel, e cada cor que você clica fica salva em uma faixa 'capturadas da imagem' para que você possa montar uma paleta a partir de uma única imagem sem perder capturas anteriores. A imagem é processada localmente usando um canvas HTML e nunca sai do seu dispositivo — funciona em todos os navegadores, inclusive Firefox e Safari.
Prefere capturar uma cor de outro lugar da tela? O conta-gotas recolhe qualquer pixel da sua tela no Chrome 95+ e Edge 95+ via a API EyeDropper nativa — clique nele, aponte para qualquer pixel na tela e essa cor carrega em todos os campos instantaneamente. Uma faixa de cores recentes e a roda de cores interativa completam as opções de captura, tudo sem precisar instalar nada. Esse recurso vai muito além do que ColorHexa, RapidTables ou convertingcolors oferecem.
Esquemas de cores, harmonias, tons e sombras
Transforme uma cor em uma paleta completa. A ferramenta gera seis esquemas de cores 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 explorando, fazendo a ferramenta funcionar como um rápido gerador de paletas de cores para criar combinações coesas e alinhadas à identidade visual da marca.
A escala de tons e sombras produz uma série de variações mais claras e mais escuras da sua cor base — útil para estados hover, estados ativos, estados desabilitados, bordas e fundos. Clicar em qualquer passo torna-o a cor ativa e exibe seu breakdown completo de formatos. Tanto a geração de paletas quanto a escala de tons/sombras atualizam instantaneamente a cada mudança de cor sem requisições ao servidor — diferente de ferramentas de design na nuvem como Adobe Color ou Coolors, que precisam de uma requisição de rede para gerar resultados.
Verificação de contraste WCAG e simulação de daltonismo
Acessibilidade está embutida 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, e exibe selos 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 cor de texto e fundo atende aos padrões de acessibilidade. Atualiza em tempo real enquanto você ajusta a cor, para que possa iterar até atingir conformidade sem precisar abrir outra ferramenta.
O simulador de daltonismo prévia como sua cor aparece para 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. Juntos, a verificação de contraste e a simulação de daltonismo ajudam a garantir que suas escolhas de design permaneçam significativas e distinguíveis para todos os usuários. Esses recursos tornam esta ferramenta mais completa do que ColorHexa, RapidTables ou convertingcolors para decisões de cor focadas em acessibilidade.
Entendendo OKLCH — o futuro das cores no CSS
OKLCH é um espaço de cores perceptualmente uniforme que chegou ao CSS mainstream por meio da especificação CSS Color Level 4. Ele representa as cores como Luminosidade (L), Croma (C) e Matiz (H), onde a Luminosidade é calibrada para a percepção humana em vez de energia de luz linear. Isso significa que duas cores com o mesmo valor L parecerão igualmente claras para o olho humano independentemente do matiz — algo que não é verdade no HSL ou RGB. Para designers criando paletas sistemáticas, isso significa que você pode definir um único valor L para 'fundo primário', aplicá-lo a todos os matizes da 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. Navegadores modernos (Chrome, Safari, Firefox) agora suportam a função CSS oklch() nativamente, tornando OKLCH o formato voltado para o futuro no trabalho de cores em CSS. Esta ferramenta exibe um aviso de gama quando o valor OKLCH inserido fica fora do intervalo sRGB e seria limitado por navegadores mais antigos, dando um alerta antecipado antes de publicar em produção.
Uma alternativa gratuita ao seletor de cores do Google, Adobe Color e ferramentas online
A maioria dos seletores de cores está escondida dentro de algo maior. O seletor de cores do Google só aparece em resultados de busca para consultas específicas e não pode ser salvo nos favoritos nem usado de forma independente. O seletor de cores da Adobe fica 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, não ferramentas interativas. convertingcolors.com cobre espaços de cor de nicho mas não tem recursos de captura e paleta. cssgradient.io é ótimo para geração de gradientes, mas não para gerenciamento de cores individuais.
Esta é uma ferramenta de seleção e conversão de cores gratuita e independente que abre com um clique, funciona em qualquer dispositivo, nunca pede que você faça login e roda completamente no seu navegador. Seja você um desenvolvedor combinando um hex de marca, um designer ajustando uma paleta HSL, um profissional de impressão verificando aproximações CMYK ou um engenheiro de acessibilidade verificando relações de contraste WCAG — esta ferramenta faz todo o trabalho em uma página rápida e privada. Suporte a OKLCH, verificação de acessibilidade e geração de paletas já estão incluídos por padrão, recursos pelos quais a maioria das alternativas cobra ou simplesmente não oferece.
Frequently asked questions
Este conversor de cores é gratuito?
Sim — completamente gratuito, sem cadastro, sem conta e sem limites de uso. Funciona inteiramente no seu navegador, então as cores que você seleciona, cola ou captura nunca saem do seu dispositivo. Não há nada para instalar e não é preciso assinar nenhum plano. Todos os recursos — 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 cores — estão disponíveis de graça na primeira visita, sem precisar de conta.
Como converto um código HEX para RGB?
Cole seu código hex (com ou sem o # inicial) no campo HEX e os valores RGB, HSL, HSV, CMYK e OKLCH atualizam instantaneamente. Por exemplo, cole #3b82f6 e você verá imediatamente rgb(59, 130, 246) no campo RGB e hsl(217, 91%, 60%) no campo HSL. Todos os formatos ficam em sincronia — você só precisa inserir uma cor uma vez. A conversão é bidirecional: digite um valor RGB e o HEX e todos os outros campos atualizam da mesma forma.
Quais formatos de cor esta ferramenta converte?
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 porcentagens), HSV/HSB (matiz-saturação-valor, o modelo usado na maioria dos seletores de cores de aplicativos de design), CMYK (porcentagens de ciano-magenta-amarelo-preto para prévia de impressão) e OKLCH (um espaço de cores moderno perceptualmente uniforme). Mude qualquer campo e os outros cinco atualizam instantaneamente.
Posso capturar uma cor de uma imagem ou foto?
Sim — este é um seletor de cor de imagem completo. Faça upload de uma foto, arraste e solte ou cole 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 pixel. Uma lupa ampliadora faz zoom para uma seleção precisa. A imagem é processada localmente no seu navegador usando um canvas HTML e nunca é enviada a nenhum servidor.
Ele 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 branco e preto, e exibe selos 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 em tempo real enquanto você ajusta qualquer campo de cor.
O que é OKLCH e por que devo usá-lo?
OKLCH é um espaço de cores 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 é calibrado para que aumentar ou diminuir o valor de luminosidade (L) por uma quantidade fixa produza um resultado visualmente consistente independentemente do matiz. Isso o torna ideal para criar paletas de cores acessíveis e equilibradas. O OKLCH também representa cores de gama ampla (Display P3) e é suportado nativamente nos navegadores modernos.
O seletor de cores funciona no iPhone e no Android?
Sim. A ferramenta toda roda 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 cores funcionam normalmente no celular. O conta-gotas de tela não está disponível em navegadores móveis (é uma API exclusiva do Chrome/Edge no desktop), mas o seletor de imagem e colar da área de transferência funcionam perfeitamente no celular.
Related tools
Ver todas as ferramentas
Novo Gerador de glassmorphism
Crie um cartão de vidro fosco e copie o CSS, com prévia ao vivo.
Novo Gerador de text-shadow CSS
Ajuste uma sombra de texto CSS com prévia ao vivo e copie o código.
Novo Misturador de cores
Misture duas cores em qualquer proporção e copie o resultado ou qualquer etapa.
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.