Skip to main content

Seletor de Cores Seletor de cores interativo com saídas em HEX, RGB, HSL e CMYK.

Seletor de Cores illustration
🎨

Seletor de Cores

Seletor de cores interativo com saídas em HEX, RGB, HSL e CMYK.

1

Selecione uma Cor

Clique na paleta de cores, use o seletor nativo ou ajuste os sliders HSL.

2

Veja Todos os Formatos

Visualize a cor em HEX, RGB, HSL e CMYK simultaneamente.

3

Copie Qualquer Formato

Clique em Copiar ao lado de qualquer formato para obter seu valor para o seu projeto.

Loading tool...

What Is Seletor de Cores?

Um seletor de cores interativo que permite selecionar qualquer cor e visualizar instantaneamente seus valores em quatro formatos de cor principais: HEX, RGB, HSL e CMYK. A ferramenta apresenta uma tela de saturação-luminosidade, um controle deslizante de tom e uma entrada de cor nativa, fornecendo várias maneiras de encontrar a cor exata que você precisa. Seja você um designer procurando pela tonalidade perfeita, um desenvolvedor que precisa de valores de cor para CSS ou qualquer pessoa que trabalhe com cores, essa ferramenta fornece todos os valores necessários em um só lugar. A tela renderiza uma grade completa de saturação-luminosidade para o tom selecionado atualmente, permitindo explorar visualmente variações de cor. As quatro saídas de formato são atualizadas em tempo real e incluem botões de cópia, para que você possa rapidamente obter o valor necessário para qualquer contexto - desenvolvimento web, design gráfico ou desenvolvimento de aplicativos.

Why Use Seletor de Cores?

  • Múltiplos métodos de entrada: paleta, seletor nativo e sliders HSL
  • Quatro formatos de saída simultâneos: HEX, RGB, HSL, CMYK
  • Amostra grande de pré-visualização de cor para avaliação visual precisa
  • Seletor de saturação-luminosidade baseado em paleta para exploração de cores precisas
  • Copia com um clique para cada formato

Common Use Cases

Desenvolvimento Web

Encontre e copie a cor perfeita em qualquer formato compatível com CSS (HEX, RGB, HSL).

Trabalho de Design

Explore cores visualmente usando a paleta e obtenha valores exatos para ferramentas de design.

Referência entre Formatos

Veja como uma única cor se traduz em HEX, RGB, HSL e CMYK simultaneamente.

Preparação para Impressão

Escolha uma cor visualmente e obtenha valores CMYK para especificações de impressão.

Technical Guide

O seletor de cores renderiza uma tela de 256×256 pixels onde o eixo X representa a saturação (0-100%) e o eixo Y representa a luminosidade (100-0%). Para cada pixel, a conversão HSL para RGB é computada e desenhada. O controle deslizante de tom controla qual tom é exibido na tela, criando um espaço abrangente de exploração para qualquer cor. A tela usa a API do HTML5 Canvas para renderização em tempo real. Quando o usuário clica na tela, a posição do mouse é mapeada para valores de saturação e luminosidade, que são então convertidos nos quatro formatos de saída. A entrada de cor nativa do HTML fornece um método alternativo de seleção e sincroniza bidirecionalmente com os controles deslizantes HSL. A saída CMYK usa a fórmula matemática de conversão RGB-para-CMYK. Todas as conversões ocorrem em tempo real sem interação com o servidor, tornando a ferramenta responsiva e privada.

Tips & Best Practices

  • 1
    Clique em qualquer lugar da paleta para encontrar rapidamente uma cor na família de tons atuais
  • 2
    Use o slider de tom para percorrer o espectro, então ajuste com a paleta
  • 3
    O seletor de cores nativo fornece acesso ao diálogo de cores do seu sistema operacional para máxima precisão
  • 4
    Copie HEX para web, RGB para Canvas/JavaScript, HSL para temas CSS, CMYK para impressão
  • 5
    Os valores HSL são frequentemente os mais úteis para criar escalas de cor de sistemas de design

Related Tools

Frequently Asked Questions

Q Por que preciso de um seletor de cores?
Um seletor de cores ajuda a encontrar e selecionar cores exatas visualmente, então fornece os valores precisos necessários para implementação em qualquer formato. Ele elimina o trabalho de adivinhação e conversão manual entre formatos.
Q Qual é a diferença entre a paleta e o seletor nativo?
A paleta mostra uma grade 2D de saturação-luminosidade para exploração precisa dentro de um tom. O seletor nativo usa o diálogo de cores do seu sistema operacional, que pode oferecer recursos adicionais como um conta-gotas.
Q Posso escolher cores da minha tela?
A entrada de cor nativa em alguns navegadores (Chrome, Edge) inclui uma ferramenta de conta-gotas que permite escolher qualquer cor visível na sua tela.
Q As quatro saídas de formato estão sempre sincronizadas?
Sim, todos os formatos sempre representam a mesma cor exata. Alterar a cor por meio de qualquer método de entrada atualiza as quatro saídas simultaneamente.

About This Tool

Seletor de Cores is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.