#3B82F6
Cor HTML / CSS
rgb(59, 130, 246)
hsl(217, 91%, 60%)
hsv(217, 76%, 96%)
cmyk(76%, 47%, 0%, 4%)
O que faz
O Seletor e Conversor de Cores permite escolher qualquer cor e vê-la instantaneamente em cinco formatos - HEX, RGB, HSL, HSV e CMYK - lado a lado com uma prévia ao vivo. Edite um valor em qualquer um desses formatos e todos os outros formatos são atualizados a partir da mesma fonte única de verdade, então os valores nunca divergem entre si. Ele também mostra o nome CSS mais próximo, informa se texto preto ou branco permanece legível sobre a cor (WCAG AA/AAA) e lembra suas cores recentes. Escolha com o quadrado de cores nativo, digite um código hex, arraste os controles deslizantes HSL, randomize ou - em navegadores Chromium - capture uma cor direto da tela com o conta-gotas. Tudo roda 100% no lado do cliente: a cor escolhida nunca sai do seu navegador.
Como usar
- Escolha uma cor inicial: o quadrado de cores nativo, o campo HEX, o conta-gotas de Tela (só Chromium), os controles HSL ou Randomizar.
- Observe a amostra de prévia ao vivo (com seu nome de cor mais próximo) e os cinco cartões de formato serem atualizados juntos.
- Para converter a partir de outro espaço, edite diretamente os campos R/G/B, H/S/L, H/S/V ou C/M/Y/K - digite um número e saia com Tab (ou pressione Enter) para confirmá-lo.
- Consulte Legibilidade do texto para ver se texto preto ou branco passa WCAG AA/AAA nessa cor, com as razões de contraste exatas.
- Clique em qualquer amostra Recente para voltar a uma cor que você acabou de usar.
- Toque em Copiar em qualquer cartão para copiar a string daquele formato (
#3B82F6,rgb(59, 130, 246), …), ou em Copiar link de compartilhamento para enviar a cor exata para outra pessoa.
Exemplos
Azul primário → todos os formatos
Escolha #3b82f6:
HEX: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
HSV: hsv(217, 76%, 96%)
CMYK: cmyk(76%, 47%, 0%, 4%)
Name: royal blue
Text: #000000 (5.71:1 - AA pass)Converter HSL para hex
Digite H 0, S 0%, L 50% → um cinza neutro:
HEX: #808080
RGB: rgb(128, 128, 128)Compartilhar uma cor
Escolha uma cor e a URL passa a ser …/tools/color-picker?c=3b82f6 - abra em qualquer lugar para chegar exatamente na mesma cor.
Bom saber
- Uma fonte única de verdade: toda edição passa por um único RGB normalizado, então HEX/RGB/HSL/HSV/CMYK sempre concordam. HSL, HSV e CMYK são representações com perda, então um valor digitado pode ser exibido arredondado ao inteiro mais próximo - isso é esperado, não um bug.
- Nomes de cores são aproximados: a “cor nomeada mais próxima” é casada contra um subconjunto curado de nomes CSS bem conhecidos, então tons incomuns podem saltar para um vizinho próximo.
- Conta-gotas: o botão de Tela usa a EyeDropper API do navegador, disponível em navegadores Chromium (Chrome, Edge, Arc). Fica oculto onde não há suporte.
- Compartilhável: sua cor é codificada na URL (
?c=…), e as cores recentes ficam armazenadas localmente no seu navegador - nunca enviadas a um servidor. - Privado: toda a conversão acontece localmente.
- Ferramentas relacionadas: Palette Generator, Color Contrast Checker, CSS Animation Playground.