Etapa 1
Escolha ou informe uma cor
Use o seletor visual, aplique um código HEX válido de três ou seis dígitos, escolha uma amostra rápida ou inicie o EyeDropper da tela quando seu navegador for compatível.
Ferramentas de design grátis
Seletor de cores online gratuito: HEX, RGB e HSL
Escolha uma cor visualmente ou informe um valor HEX; depois, ajuste RGB, HSL e opacidade. Visualize o resultado, compare tons próximos e copie o código de cor exato sem login.
Escolha e edite uma cor
Cor inicial: #0F766E. Todo controle válido atualiza uma seleção sRGB de 8 bits.
Aceita #RGB ou #RRGGBB. A opacidade é controlada separadamente.
Visualização de transparência
#0F766E
Visualização de texto opaco
Texto branco5.47:1
Texto preto3.84:1
Copiar valores de cor
HSV é uma referência de design; as outras linhas são valores prontos para CSS.
Tons relacionados
Selecione uma tonalidade clara, escura ou complementar.
Salvas para esta aba
Até oito cores; recarregar limpa o conjunto.
Nenhuma cor salva ainda.
Como escolher uma cor online
Etapa 2
Ajuste RGB, HSL e opacidade
Ajuste os canais vermelho, verde e azul ou mude matiz, saturação, luminosidade e opacidade. Cada controle válido mantém as prévias e os formatos de saída sincronizados.
Etapa 3
Visualize, salve e copie o valor
Confira a transparência e o texto claro ou escuro, experimente um tom relacionado, salve até oito opções da aba atual e copie o valor exato de que seu CSS ou ferramenta de design precisa.
Edite valores HEX, RGB, HSL e alfa
Os controles expressam uma cor sRGB de 8 bits em várias formas úteis. Escolha a representação que corresponde às informações que você já tem ou ao ajuste que precisa fazer.
Use HEX para códigos compactos de cores web
Informe #RGB ou #RRGGBB e aplique-o sem perder a cor válida anterior quando o campo estiver incompleto. Copie HEX de seis dígitos para uma cor-base opaca ou HEX de oito dígitos quando precisar de um canal alfa.
Ajuste os canais vermelho, verde e azul
RGB expõe diretamente os três canais sRGB de 0 a 255. Use-o quando uma especificação ou aplicativo de design fornecer valores numéricos de vermelho, verde e azul ou quando um canal precisar de uma pequena correção.
Altere matiz, saturação, luminosidade e alfa
O matiz gira em torno de 0 a 360 graus, a saturação controla a intensidade da cor, a luminosidade se aproxima de preto ou branco e o alfa controla a transparência. Esses controles permanecem dentro de intervalos válidos.
Visualize uma cor em superfícies claras e escuras
Um código numérico é mais fácil de avaliar quando aparece em contextos realistas. Use estas prévias como evidência para a próxima decisão, não como uma revisão completa de acessibilidade.
Confira a cor sobre transparência
Um padrão quadriculado torna a opacidade visível, em vez de mostrar todos os valores de alfa somente sobre branco. Compare a prévia transparente com a amostra-base opaca antes de copiar um formato com reconhecimento de alfa.
Compare texto branco e preto
A área de trabalho coloca texto branco e preto sobre a cor opaca selecionada e informa cada proporção de contraste. Isso ajuda a identificar uma direção provável antes de testar o par real de primeiro plano e fundo.
Execute uma verificação completa de contraste para um par de cores
Um fundo selecionado e duas cores de texto de exemplo não podem validar uma interface completa. Use o Verificador de contraste de cores dedicado para testar o par exato e analisar os limites para texto normal e grande.
EyeDropper do navegador, privacidade e limites de cor
APIs de navegador e valores digitais de cor têm limites práticos. A página mantém os controles alternativos utilizáveis e explica o que os números selecionados podem e não podem representar.
Use o EyeDropper da tela quando houver suporte
O EyeDropper é um aprimoramento progressivo com disponibilidade limitada em navegadores. Ele exige seu clique no botão, retorna uma cor de tela selecionada, pode ser cancelado com Escape e pode exigir um contexto seguro.
Mantenha as cores selecionadas na aba atual
O seletor converte valores e mantém as amostras salvas no estado atual da página. Ele não precisa de conta nem de uma solicitação externa de processamento de cores e não promete armazenamento permanente ou disponibilidade offline.
Trate o resultado como uma cor web sRGB
A ferramenta usa valores sRGB de 8 bits para fluxos de trabalho web e de tela. Ela não lê perfis de imagem, não gera valores de gama ampla e não garante correspondência com impressoras, tintas, papel, pintura ou sistemas de cores proprietários.
Privacidade e limites
Os cálculos de cor e as amostras salvas permanecem nesta aba do navegador e não são enviados a um serviço externo de cores. O EyeDropper opcional da tela só é iniciado após seu clique e não está disponível em todos os navegadores ou contextos.
- • A aparência e a disponibilidade da entrada visual de cor e do EyeDropper de tela variam conforme o navegador e a plataforma.
- • Esta ferramenta usa valores sRGB de 8 bits e não fornece correspondência de cores gerenciada para impressão, pintura, PANTONE ou gama ampla.
- • Ela não envia imagens nem amostra pixels de um arquivo de imagem.
- • As amostras salvas são um estado temporário da aba atual e são apagadas ao recarregar.
Perguntas frequentes
Este seletor de cores é gratuito?
Sim. Este seletor de cores é gratuito para usar online, sem cadastro ou login. A página não coloca a escolha de cores, a edição de canais, as amostras salvas na aba atual nem as ações de cópia atrás de uma conta.
Como uso o seletor de cores online?
Escolha uma cor pelo controle visual, informe um valor HEX válido de três ou seis dígitos ou use Escolher da tela em um navegador compatível. Ajuste RGB, HSL ou opacidade, confira as prévias e copie o formato necessário.
Quais formatos de cor posso copiar?
Você pode copiar HEX opaco, HEX com reconhecimento de alfa, RGB CSS moderno, HSL CSS moderno, valores de referência HSV e uma declaração de propriedade personalizada CSS. Quando a opacidade é menor que 100%, as linhas com reconhecimento de alfa a incluem explicitamente.
Qual é a diferença entre HEX, RGB e HSL?
HEX e RGB descrevem os mesmos canais sRGB de 8 bits de vermelho, verde e azul, mas com sintaxes diferentes. HSL representa a cor por matiz, saturação e luminosidade, o que pode ser mais prático quando você quer girar um matiz ou deixar uma cor mais suave, clara ou escura.
Posso adicionar opacidade ou copiar uma cor com alfa?
Sim. Ajuste a opacidade de 0% a 100%. A prévia transparente é atualizada sobre um padrão quadriculado, e as linhas HEX, RGB, HSL e de variável CSS com alfa incluem a opacidade selecionada. O HEX opaco continua disponível como a cor-base de seis dígitos.
Posso escolher uma cor de qualquer lugar da minha tela?
Em um navegador compatível e contexto seguro, Escolher da tela inicia o EyeDropper do navegador após seu clique. Selecione um pixel da tela ou pressione Escape para cancelar. Se o botão não estiver disponível, use o seletor visual normal ou os campos numéricos.
Este seletor de cores envia ou salva minhas cores?
Nenhuma entrada de cor é enviada para um serviço externo de cores. A cor selecionada e as amostras salvas existem somente no estado da página atual. Recarregar ou fechar a aba limpa o conjunto de trabalho salvo.
Posso escolher uma cor de uma imagem enviada?
Não. Esta rota é um seletor geral de cores e conversor de formatos; ela não carrega imagens nem amostra pixels delas. Em um navegador compatível, o EyeDropper opcional da tela pode amostrar um pixel visível após uma ação explícita do usuário.
As proporções de contraste exibidas garantem acessibilidade?
Não. Elas comparam a cor-base opaca com branco e preto apenas como uma prévia rápida. Teste o par real de primeiro plano e fundo no Verificador de contraste de cores dedicado e revise o restante da interface, incluindo tamanho e peso do texto, estados e indicações que não dependam só da cor.
A cor selecionada corresponderá à impressão, tinta ou a todas as telas?
Não necessariamente. Esta ferramenta trabalha com cores web sRGB de 8 bits. Calibração de tela, perfis de imagem, espaços de cor de gama ampla, perfis de impressora, tintas, papel, pintura e sistemas de cores proprietários podem produzir resultados diferentes mesmo quando um valor numérico parece semelhante.
Ferramentas relacionadas
Vd Ferramentas de design grátis
Confira o contraste de um par de cores
Verificador de contraste de cores
Teste cores de texto e fundo segundo WCAG 2.2 AA e AAA. Veja a proporção de contraste exata, visualize o tamanho e o peso de fonte selecionados e identifique se o par é aprovado.
Gd Ferramentas de design grátis
Crie um gradiente CSS
Gerador de gradiente CSS
Crie gradientes lineares, radiais ou cônicos com duas a seis paradas de cor. Visualize o resultado ao vivo, ajuste a direção ou origem relevante e copie CSS pronto para usar sem fazer login.
Gd Ferramentas de design grátis
Aplique cor a uma sombra CSS
Gerador de sombra de caixa CSS
Crie sombras CSS em camadas com até quatro camadas editáveis. Ajuste deslocamentos, desfoque, expansão, cor, opacidade e modo inset, visualize o resultado e copie o CSS sem login.
Od Ferramentas de design grátis
Prepare um ativo SVG
Otimizador de SVG
Envie ou cole marcação SVG, otimize-a localmente com SVGO e compare o código, tamanho do arquivo e resultado visual antes de baixar. Não é necessário login nem envio ao servidor.