O que é um seletor de cores?

Um seletor de cores permite escolher uma cor visualmente, em vez de digitar números. A maioria dos aplicativos de design apresenta o seletor da mesma forma: um controle deslizante de matiz permite escolher a cor base no espectro de cores, e um quadrado ao lado define a intensidade dessa matiz (saturação, da esquerda para a direita) e o brilho (de cima para baixo). Esse layout corresponde ao modelo de cores HSV, e todas as cores que uma tela pode exibir têm um ponto nele.

Descrição da ferramenta

Arraste pelo quadrado e pelo controle deslizante de matiz para encontrar uma cor, ou digite ou cole uma cor que você já tenha em HEX, RGB, HSL ou outro formato. No Chrome e no Edge, o botão do conta-gotas seleciona uma cor de qualquer parte da tela, mesmo fora do navegador. Defina a opacidade para cores translúcidas e copie o resultado no formato de que precisa: HEX para CSS e para a maioria das ferramentas de design, RGB e HSL para CSS, HSV para aplicativos de design, OKLCH para CSS moderno e CMYK como ponto de partida para impressão.

Recursos

  • Quadrado de saturação e brilho com um controle deslizante de matiz, compatível com mouse, toque ou teclado
  • Conta-gotas para selecionar cores da tela no Chrome e no Edge
  • Digite ou cole uma cor em HEX, RGB, HSL, HWB, CMYK e outros formatos
  • Opacidade, exibida sobre uma grade de transparência
  • Valores HEX, RGB, HSL, HSV, OKLCH e CMYK, todos prontos para copiar
  • Mais formatos, como HWB, LAB, LCH e XYZ, disponíveis na lista de formatos da cor selecionada
  • Funciona no navegador

Como funciona

A ferramenta mantém a cor como matiz, saturação e valor, para que a matiz permaneça onde você a deixou ao arrastar em direção ao branco, ao preto ou ao cinza. Os outros formatos são calculados a partir dela: HEX e RGB são arredondados para números inteiros de 0 a 255; HSL e HSV, para graus e porcentagens inteiros; e OKLCH é convertido pelo espaço de cores sRGB. Quando a opacidade é inferior a 100%, HEX recebe um quarto par de dígitos e os formatos CSS recebem um valor alfa. CMYK não tem canal alfa e é uma conversão simples, sem perfil de impressora.

Dicas

  • A opacidade da cor colada, como em rgba(), não é mantida: defina-a no campo Opacidade.
  • Clique no quadrado ou no controle deslizante e use as teclas de seta para avançar em incrementos de 1%, ou de 10% com Shift.
  • Para selecionar cores em uma foto ou captura de tela, use o Seletor de cores de imagem, que lê a própria imagem.
  • Peça à gráfica os valores CMYK que deve usar, pois a mesma cor pode ser impressa de forma diferente em impressoras e papéis distintos.