Color Picker — seletor de cores e conversor de códigos de cores

Sim, o Color Picker é grátis e não exige cadastro. Todas as conversões acontecem diretamente no seu navegador: sem upload, sem registro de atividades e sem solicitações ao servidor. Apenas a URL da página inclui a cor atual em ?color=, para você compartilhá-la por link ou salvar a página nos favoritos.

Clique no campo colorido ao lado de “Cor CSS mais próxima:”, escolha a saturação e a luminosidade no quadrado e a matiz no controle abaixo. O código HEX aparece na parte superior do resultado e pode ser obtido com o botão de copiar. Se você já souber a cor em RGB, HSL, HSV ou CMYK, digite o valor no campo correspondente. Para extrair uma cor de uma foto ou captura de tela, use o Image Color Picker, pois esta ferramenta não lê imagens. Ir para o Image Color Picker

Digite ou cole o valor no campo RGB, como 24, 232, 136 ou rgb(24, 232, 136). O campo HEX mostra imediatamente #18e888, e HSL, HSV e CMYK também são atualizados. Para fazer o inverso, insira o código HEX com ou sem # no campo HEX. As duas notações descrevem a mesma cor na tela: HEX representa os três valores RGB de 0 a 255 como pares hexadecimais de 00 a ff.

RGB descreve uma cor pelas componentes de luz vermelha, verde e azul que uma tela mistura. HSL (matiz/saturação/luminosidade) e HSV (matiz/saturação/valor) são duas conversões diferentes do mesmo valor RGB, mais intuitivas para as pessoas. HSL é útil para clarear ou escurecer uma cor; HSV, para a ajustar com uma paleta de matiz, saturação e brilho. Já CMYK (ciano/magenta/amarelo/preto) descreve a mistura de tinta ou toner usada na impressão, não a mistura de luz.

O valor CMYK é uma aproximação simplificada, calculada sem perfil de cor e arredondada para porcentagens inteiras. Ele ajuda você a avaliar uma cor de tela para impressão, mas não substitui uma prova de impressão com o perfil da gráfica. Você pode inserir CMYK como 0%, 61%, 72%, 0% ou cmyk(0%, 61%, 72%, 0%).

Sim. Com o controle de opacidade, você ajusta de 0 a 100 %. O resultado mostra a cor em rgba() e hsla() para copiar. Se inserir um valor com alfa, como um código HEX de 4 ou 8 dígitos (#rrggbbaa), rgba() ou hsla(), o controle adotará essa opacidade quando você sair do campo. O código HEX no resultado continua com seis dígitos.

A taxa mede, de 1:1 a 21:1, o quanto duas cores, como texto e fundo, se distinguem. As classificações da ferramenta são: AAA a partir de 7:1, AA a partir de 4.5:1 para texto normal e AA (texto grande) a partir de 3:1 para letras grandes ou em negrito. O Color Picker mostra a taxa da sua cor em relação ao preto e ao branco. Para outras combinações de cores de texto e fundo, use o Contrast Checker. Ir para o Contrast Checker

Ao lado do campo de cor, a ferramenta mostra a cor CSS mais próxima. Para isso, calcula a distância euclidiana entre a sua cor e cada cor CSS nomeada no espaço RGB e indica a mais próxima, como tomato para #ff6347. Se não houver correspondência exata, aparece “semelhante” ao lado. Você pode copiar o nome e usá-lo no CSS no lugar do código HEX, mas, se aparecer “semelhante”, ele será apenas uma aproximação.