# Color Picker Online

> Roda de cores HSV, HSL e RYB dos pintores, harmonias prontas e conversor HEX, RGB, HSL, OKLCH e CMYK. Token Tailwind mais próximo. Grátis, sem instalação.

URL: https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

Escolha uma cor na roda, ajuste-a no quadro de saturação e brilho e leia o resultado em todos os formatos que o seu projeto usa, de `#RRGGBB` a `oklch()`. A ferramenta também cobre o que outros seletores de cor deixam de fora: três geometrias de roda, incluindo a roda RYB tradicional dos pintores, harmonias que montam uma paleta sozinhas, canal alfa e exportação da paleta inteira em um clique como variáveis CSS, SCSS ou JSON. Tudo calculado no seu navegador.

## RYB ou RGB? Três rodas de cores em vez de uma

O seletor **Modo da Roda** muda como os matizes ficam distribuídos na roda:

- **HSV** e **HSL** são rodas digitais. Os matizes ficam onde a luz os mistura na tela. Elas diferem no quadro: no HSV o canto mais claro é o matiz puro, enquanto no HSL os matizes puros ficam na luminosidade média, com o branco acima.
- **RYB (pintores)** organiza os matizes como os pintores aprendem: vermelho, amarelo e azul como primárias, com laranja, verde e roxo entre elas (veja o [modelo RYB](https://pt.wikipedia.org/wiki/RYB) na Wikipédia). A diferença aparece principalmente nas harmonias. Na roda RYB o complementar do vermelho é o **verde** e o complementar do azul é o **laranja**, os pares clássicos de pigmento. Uma roda digital combina o vermelho com o ciano. Se uma paleta “complementar” de um seletor comum já pareceu errada para você, é por isso.

## Harmonias de cores que montam a paleta para você

Escolha uma regra em **Harmonia de Cores**. A roda marca as cores companheiras e uma paleta pronta aparece abaixo dela:

- **Complementar:** uma cor oposta. O contraste mais forte, bom para um único destaque ao lado da cor principal da marca.
- **Complementar Dividida:** os dois vizinhos do complementar. Quase tanto contraste, mas muito mais fácil de equilibrar.
- **Triádica:** três matizes espaçados igualmente. Vibrante e estável quando um deles domina e os outros dois são usados com moderação.
- **Tetrádica (quadrado):** quatro matizes. Esquemas ricos para ilustrações e gráficos, difíceis de equilibrar em uma interface de aplicativo.
- **Análoga:** os vizinhos mais próximos. Combinação tranquila para fundos e transições.
- **Monocromática:** um matiz em vários níveis de luminosidade. A escolha mais segura para estados de botão (hover, ativo, desativado).

Copie a paleta inteira em um clique no formato que você escolher: **HEX** puro, **RGB**, **HSL**, **OKLCH**, **variáveis CSS** (`--color-1: …`) prontas para colar, **variáveis SCSS** ou **JSON** para o código. Para conferir se as cores da paleta mantêm contraste para pessoas que distinguem matizes com mais dificuldade, tire um print e [converta em tons de cinza](https://acrafto.com/pt/converter-imagens-para-tons-de-cinza-online/).

## Converta HEX, RGB, HSL, OKLCH e CMYK: cole qualquer coisa, leia tudo

Os campos de entrada aceitam quase qualquer notação de cor: `#f80`, `#ff8800`, hex de oito dígitos com alfa, `rgb()` e `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` e cores CSS nomeadas como `rebeccapurple`. Seja o que for que você digitar, você recebe sete saídas sincronizadas: **HEX, RGB, HSL, HSV, LCH, OKLCH e CMYK**, cada uma com o seu próprio botão de copiar.

O controle **Opacidade (alfa)** abaixo da pré-visualização muda as saídas para suas formas transparentes `#RRGGBBAA`, `rgba()` e `hsla()`. A pré-visualização é desenhada sobre um fundo quadriculado, então você vê a transparência na hora.

## Encontre o token Tailwind CSS mais próximo

Dois rótulos abaixo da pré-visualização dão nome à cor: a **cor CSS nomeada mais próxima** (útil para protótipos rápidos) e o **token Tailwind mais próximo**, por exemplo `orange-500`. Assim você continua dentro do seu design system em vez de inventar valores avulsos. Clique em um rótulo para copiá-lo.

Isso resolve a pergunta que surge em toda entrega de design: o designer mandou um código hex, qual classe Tailwind corresponde a ele? A correspondência é calculada contra a paleta padrão do Tailwind CSS 4 (veja a [documentação do Tailwind](https://tailwindcss.com/docs/colors), em inglês), então você pode usar o token direto no nome da classe.

## Qual formato de cor usar?

| Formato | Nome completo | Quando usar |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **Padrão da web.** Curto, suportado em todo lugar, fácil de copiar. Oito dígitos adicionam alfa. |
| **RGB** | Red, Green, Blue | **Como as telas pensam.** Três canais de luz de 0 a 255. O formato que a maioria das APIs e do código canvas espera. |
| **HSL** | Hue, Saturation, Lightness | **Para ajustar a olho.** “Um pouco mais claro” ou “menos saturado” é só mudar um número. |
| **HSV** | Hue, Saturation, Value | **Programas gráficos.** O modelo por trás do seletor de cores do Photoshop e do GIMP. |
| **LCH** | Lightness, Chroma, Hue | **Uniformidade perceptual.** Os mesmos passos numéricos parecem os mesmos passos visuais, o que o HSL só finge fazer. |
| **OKLCH** | OK Lightness, Chroma, Hue | **A escolha moderna para CSS.** Corrige os desvios de matiz nos tons de azul que afetam o LCH. Suportado por todos os navegadores atuais e ideal para tokens de design. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Orientação para impressão.** Conversão aproximada para conversar com a gráfica, os valores finais dependem do perfil de cor dela. |

Por que o OKLCH é perceptualmente mais uniforme que os modelos mais antigos é explicado por Björn Ottosson, que projetou o espaço Oklab, no [artigo original](https://bottosson.github.io/posts/oklab/) (em inglês). A sintaxe e o suporte nos navegadores estão resumidos no [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (em inglês). Como funciona o modelo de impressão é descrito no artigo [CMYK](https://pt.wikipedia.org/wiki/CMYK) da Wikipédia.

## Pequenos detalhes que economizam tempo

- **O histórico se guarda sozinho.** As últimas 24 cores sobrevivem a uma atualização da página. Ficam só no armazenamento do seu navegador e nunca são enviadas.
- **Conta-gotas.** Em navegadores com a API EyeDropper (Chrome e Edge) você escolhe uma cor em qualquer lugar da tela, até fora da janela do navegador. Precisa da cor de uma foto ou de um arquivo de logo? Use o [Conta-gotas online](https://acrafto.com/pt/extrator-cores-imagem-online/).
- **Controle pelo teclado.** A roda e o quadro de saturação e brilho respondem às setas, então você ajusta a cor em passos pequenos.
- **Predefinições** trazem as cores básicas mais comuns quando você só precisa de um ponto de partida rápido.

## Perguntas frequentes

### Como converter OKLCH para HEX?

Cole o valor `oklch()` no campo OKLCH e as outras saídas, incluindo o HEX, são recalculadas na hora. Funciona ao contrário também: digite o HEX e leia o `oklch()` correspondente. Uma ressalva: o OKLCH consegue descrever cores fora do gamut sRGB, e essas são recortadas para o que o sRGB consegue exibir. Por isso um `oklch()` muito saturado não vai ficar igual à sua versão em HEX em uma tela de gamut amplo.

### Posso usar oklch() em CSS de produção?

Sim. Todas as versões atuais do Chrome, Edge, Firefox e Safari suportam `oklch()`, e ele se tornou uma notação popular para tokens de design (o Tailwind CSS 4 define toda a sua paleta nele). Para navegadores muito antigos, coloque um HEX de fallback na linha anterior. Esta ferramenta te dá os dois valores.

### Por que as harmonias mudam quando eu troco para a roda RYB?

Porque o que conta como "oposto" depende de como os matizes estão distribuídos ao redor do círculo. A roda RYB distribui as primárias do pigmento igualmente, então os pares complementares batem com o que os pintores conhecem: vermelho e verde, azul e laranja, amarelo e roxo. As rodas HSV e HSL distribuem os matizes conforme a mistura de luz, por isso combinam vermelho com ciano. Nenhuma das duas está errada: a RYB segue o ensino tradicional de artes, o HSV e o HSL seguem o que as telas fazem.

### Posso confiar nos valores de CMYK para impressão?

Trate-os como uma referência. A conversão real para impressão depende do [perfil ICC](https://en.wikipedia.org/wiki/ICC_profile) (em inglês) da impressora, do papel e da tinta. A mesma cor RGB sai diferente em papel couché e em papel sem revestimento. Os valores aqui usam a fórmula padrão, que chega perto, mas a prova final é responsabilidade da gráfica.

### Onde está o botão do conta-gotas no Firefox ou no Safari?

Ele fica escondido de propósito. A [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, em inglês) por trás do botão, por enquanto, só existe em navegadores baseados em Chromium (Chrome, Edge, Opera). O resto da ferramenta funciona em todo lugar, só falta escolher a cor direto da tela. Se você precisa da cor de uma imagem, use o [Conta-gotas online](https://acrafto.com/pt/extrator-cores-imagem-online/), que funciona em qualquer navegador.

### Meu histórico de cores é privado?

Sim. O histórico fica no localStorage do seu navegador, no seu dispositivo. Nada do que você escolhe, cola ou copia é enviado para qualquer lugar. A ferramenta inteira roda como JavaScript no navegador, o que você pode conferir na aba Rede das ferramentas de desenvolvedor.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))