Ferramenta de cor

Seletor de cor gratuito

O conta-gotas, editor e gerador de paletas tudo-em-um — 100 % local, sem registo necessário. Explore milhares de milhões de cores, crie harmonias, verifique a acessibilidade e exporte com um clique.

100 % local, sem upload HEX · RGB · HSL · CMYK · OKLCH Acessibilidade AA / AAA
A ferramenta

Escolha uma cor e explore todas as suas variações

Roda de cores, conta-gotas de tela, 16 formatos, harmonias, imagem → paleta, gradientes, contraste WCAG, daltonismo, mistura, ΔE e playground. 100 % local, grátis, sem conta.

Seletor de cor

Online Design, Multimídia & UI/UX
Entrar
HEX#6366F1
HEX8#6366F1FF
RGB99, 102, 241
RGBA99, 102, 241, 1
HSL239°, 84%, 67%
HSV239°, 59%, 95%
HWB239°, 39%, 5%
LAB51.5, -8.4, -72.8
LCH73.1, 73.3, 263.9°
OKLCH0.585, 0.233, 277°
CMYK59%, 58%, 0%, 5%
HEX#6366F1
HEX8#6366F1FF
RGB99, 102, 241
RGBA99, 102, 241, 1
HSL239°, 84%, 67%
HSV239°, 59%, 95%
HWB239°, 39%, 5%
LAB51.5, -8.4, -72.8
LCH73.1, 73.3, 263.9°
OKLCH0.585, 0.233, 277°
CMYK59%, 58%, 0%, 5%

Coloque uma imagem para extrair automaticamente a sua paleta.

Arraste uma imagem aqui ou clique para escolher

CSSlinear-gradient(90deg, #6366F1, #8B5CF6, #EC4899)
+
HEX#800080

Teste a sua cor em componentes reais de interface.

--primary: #6366F1;

0,0 0Comentários Todas as ferramentas
Grátis ou Premium?

O seletor de cor Volade é 100 % grátis, local e ilimitado — para todos. O Premium desbloqueia todo o ecossistema Volade.

Roda de cores, conta-gotas, 16 formatos, harmonias e histórico — ilimitadoGrátis
Gradientes OKLCH, contraste WCAG, daltonismo, mistura, ΔE, playgroundGrátis
Exportação para desenvolvedores em 10 linguagens, PNG/SVG — grátisGrátis
Histórico na nuvem, paletas sincronizadas e projetos ilimitadosPremium
Acesso a todo o ecossistema Volade: mais de 40 ferramentas web premiumPremium
Desbloquear Premium
Funcionalidades

Um seletor de cor verdadeiramente completo

Conta-gotas de tela

Capture qualquer cor no ecrã com o conta-gotas do navegador. Seleção pixel-perfect com lupa de alta resolução, navegação por teclado e amostragem de zona.

Experimentar

16 formatos de cor

HEX, HEX8, RGB, RGBA, HSL, HSV, HWB, LAB, LCH, OKLCH, CMYK, Display P3, XYZ e mais. Cada formato é copiável com um clique.

Ver formatos

Harmonias & paletas

Complementar, análogas, triádicas, tetrádicas, monocromáticas — gere instantaneamente paletas harmoniosas a partir de uma única cor.

Imagem → Paleta

Coloque uma foto, a ferramenta extrai automaticamente as cores dominantes, vibrantes e dessaturadas. Modos dominante, vibrant, muted, balanced e brand.

Gradiente

Linear, radial, cónico — interpolação RGB, HSL, LAB ou OKLCH. Código CSS pronto a colar com todos os prefixos de fornecedor.

Acessibilidade WCAG

Verifique as taxas de contraste AA e AAA para texto normal, texto grande e componentes UI. Auto-fix para corrigir automaticamente as cores não conformes.

Simulador de daltonismo

Protanopia, deuteranopia, tritanopia, acromatopsia e variantes — veja as suas cores como 350 milhões de utilizadores daltónicos.

Exportação para programadores

CSS, SCSS, Tailwind, JSON, TypeScript, Swift, Kotlin, Flutter, React Native, Vue — código pronto a colar no seu framework.

100 % local, 100 % privado

Tudo ocorre no seu navegador. Nenhum dado é enviado, armazenado ou analisado num servidor. Zero registo para a versão gratuita.

Como funciona

Utilize o seletor de cor em três passos

Escolha a sua cor

Utilize a roda cromática, o conta-gotas de ecrã, uma imagem ou introduza diretamente um código HEX/RGB/HSL.

Explore & configure

Gere harmonias, teste a acessibilidade, simule o daltonismo, crie gradientes e misture cores.

Exporte

Copie o código no formato da sua escolha — CSS, Tailwind, SCSS, JSON, Swift ou Kotlin — ou transfira em PNG/SVG.

FAQ

Perguntas frequentes

O que é um seletor de cor?
Um seletor de cor (color picker) é uma ferramenta que lhe permite escolher, explorar e manipular cores em todos os formatos possíveis: HEX, RGB, HSL, LAB, OKLCH, CMYK, etc. É indispensável para designers, programadores e criadores que trabalham em interfaces, paletas ou sistemas de design.
O conta-gotas de ecrã funciona em todos os navegadores?
O conta-gotas de ecrã utiliza a API EyeDropper do navegador, suportada pelo Chrome, Edge, Opera e Safari 17+. Para navegadores não suportados, pode introduzir o código de cor diretamente ou utilizar arrastar e largar de imagem.
O que é WCAG e porquê verificar o contraste?
WCAG (Web Content Accessibility Guidelines) define as normas de acessibilidade web. A taxa de contraste entre o texto e o fundo determina a legibilidade. O nível AA exige 4.5:1 para texto normal e 3:1 para texto grande. O nível AAA exige 7:1 e 4.5:1. A nossa ferramenta verifica automaticamente estas taxas e propõe um auto-fix.
O que é o modo daltonismo e para quem serve?
Cerca de 8 % dos homens e 0.5 % das mulheres são daltónicos. O simulador mostra as suas cores tal como são percebidas pelas pessoas com protanopia (vermelho), deuteranopia (verde), tritanopia (azul) ou acromatopsia (preto e branco). É essencial para conceber interfaces acessíveis.
O que é OKLCH e porquê utilizá-lo?
OKLCH é um espaço colorimétrico perceptivamente uniforme: duas cores com a mesma luminosidade LCH parecem realmente ter a mesma luminosidade ao olho humano. É ideal para criar paletas harmoniosas, gradientes sem cortes e temas dark/light coerentes. É o futuro do webdesign.
Posso extrair cores de uma foto?
Sim! Coloque qualquer imagem (JPEG, PNG, WebP) na secção Imagem → Paleta. A ferramenta analisa os píxeis e extrai automaticamente as cores dominantes, vibrantes ou dessaturadas conforme o modo escolhido. Pode depois guardar a paleta extraída.
O que é um gradiente e como criar um?
Um gradiente é uma transição suave entre duas ou mais cores. A nossa ferramenta gera gradientes lineares, radiais e cónicos com interpolação RGB, HSL, LAB ou OKLCH. O código CSS é copiável com um clique, pronto a integrar na sua folha de estilos.
A ferramenta é realmente gratuita?
Sim. A versão gratuita inclui o conta-gotas, o editor completo, as harmonias, a extração de imagens, o gradiente, o contraste WCAG, o simulador de daltonismo, a mistura, a diferença ΔE, o playground e a exportação para programadores. Não é necessário registo.
Como exporto para Tailwind ou SCSS?
No separador Código, selecione a linguagem alvo (Tailwind, SCSS, CSS, JSON, TypeScript, Swift, Kotlin, Flutter, React Native ou Vue). O código é gerado automaticamente com a cor atual e as suas variantes. Um clique em Copiar coloca-o na sua área de transferência.
Qual é a diferença entre ΔE76, ΔE94 e ΔE2000?
ΔE (Delta E) mede a diferença percebida entre duas cores. ΔE76 é a fórmula original CIE 1976. ΔE94 melhora a precisão para matizes saturados. ΔE2000 é o mais recente e o mais preciso: corrige as imperfeições perceptuais das fórmulas anteriores. Um ΔE inferior a 1 é imperceptível a olho nu.

Seletor de cor online: o guia completo

O seletor de cor Volade é uma ferramenta web tudo-em-um que combina um conta-gotas de ecrã, um editor de cor avançado, um gerador de paletas, um criador de gradientes, um verificador de acessibilidade WCAG, um simulador de daltonismo, um misturador e uma exportação para programadores — tudo numa única interface, 100 % local, sem registo.

Ao contrário dos editores clássicos limitados a HEX/RGB/HSL, o Volade suporta 16 espaços colorimétricos incluindo LAB, LCH, OKLCH, OKLAB, CMYK, Display P3, XYZ e HWB. Cada formato é apresentado em tempo real com um botão de cópia instantânea, tornando-o a ferramenta mais completa para designers, programadores e profissionais de impressão.

O conta-gotas de ecrã: precisão pixel-perfect

O conta-gotas de ecrã utiliza a API EyeDropper dos navegadores modernos para capturar qualquer cor visível no seu ecrã. Clique em qualquer lugar — numa imagem, num site, num documento — e a cor é instantaneamente capturada. A lupa de alta resolução permite-lhe mirar no píxel correto, e a navegação por teclado (setas) oferece precisão absoluta. A amostragem de zona (1×1, 3×3, 5×5, 11×11) suaviza os artefactos de compressão JPEG e obtém a cor média de uma zona.

A cor selecionada aparece no histórico de cores recentes, e a mudança para a cor anterior é instantânea. Para utilizadores avançados, o modo de precisão mostra as coordenadas exatas do píxel e os valores de cada canal em tempo real.

Um editor de cor sem compromissos

O editor apresenta simultaneamente 16 formatos de cor: HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV/HSB, HWB, CMYK, LAB, LCH, OKLAB, OKLCH, Display P3, XYZ e Linear RGB. Cada valor é editável diretamente: altere o HSL e todos os outros formatos são atualizados em tempo real. A roda cromática oferece controlo visual intuitivo, enquanto os sliders numéricos permitem um ajuste preciso.

O alpha/transparência é tratado nativamente: ajuste a opacidade de 0 a 100 % com o slider dedicado, e veja imediatamente o impacto em todos os formatos. O histórico de alterações regista cada mudança, com undo/redo para retroceder a qualquer momento.

Smart Color Intelligence: para além da simples escolha

A partir de uma única cor, a ferramenta gera automaticamente todas as harmonias clássicas: complementar, análogas, triádicas, tetrádicas, complementar dividido e monocromáticas. Mas vai mais longe: as variantes shades (mais escuras), tints (mais claras), tones (dessaturadas), warm (quentes) e cool (frias) são produzidas automaticamente.

O modo Generate Palette transforma qualquer cor num sistema de design completo: primary, secondary, accent, background, surface, text, muted, border, success, warning, error, info — cada um com os seus valores RGB, OKLCH e HEX.

Imagem → Paleta: extrair cores de uma foto

Coloque qualquer imagem (foto, ilustração, captura de ecrã) e a ferramenta analisa os píxeis para extrair a sua paleta. Cinco modos de extração estão disponíveis: Dominant (cores mais frequentes), Vibrant (as mais saturadas), Muted (dessaturadas), Balanced (visualmente harmoniosas) e Brand (cores adequadas a uma identidade visual).

A extração devolve entre 5 e 15 cores, cada uma rotulada com o seu papel potencial (dominante, acento, escura, clara). É um acelerador importante para designers que precisam de extrair um sistema de design de uma foto existente.

Verificação de acessibilidade WCAG

A secção de acessibilidade compara duas cores (primeiro plano vs. fundo) e apresenta a taxa de contraste exata com os emblemas WCAG AA e AAA para texto normal, texto grande e componentes UI. Se a taxa for insuficiente, o botão Auto Fix propõe automaticamente a cor mais próxima que respeita as normas.

É uma ferramenta essencial para programadores que devem cumprir as normas de acessibilidade obrigatórias (RGAA, EN 301 549, ADA, Section 508).

Simulador de daltonismo: conceber para todos

Cerca de 350 milhões de pessoas no mundo são daltónicas. O simulador mostra as suas cores tal como são percebidas pelos oito tipos de daltonismo: protanopia, deuteranopia, tritanopia, acromatopsia e as suas variantes moderadas. É a única forma de verificar se a sua interface é verdadeiramente acessível.

Gerador de gradientes com interpolação avançada

Crie gradientes lineares, radiais e cónicos com até 10 pontos de cor. A interpolação RGB produz gradientes clássicos; HSL oferece transições mais suaves; LAB e OKLCH criam gradientes perceptivamente uniformes sem faixas nem cortes visíveis. O código CSS é gerado automaticamente e copiável com um clique.

Misturador de cores: misturar cores

Misture duas cores com um rácio configurável (de 0/100 a 100/0) em quatro modos: RGB (mistura aditiva), HSL (rotação de matiz), LAB (espace perceptual) e OKLCH (o mais natural). É a ferramenta ideal para criar cores intermédias, sombras e tons personalizados.

ΔE Color Difference: a precisão dos profissionais

Para designers e profissionais de impressão, o cálculo da diferença colorimétrica (Delta E) é essencial. A ferramenta apresenta ΔE76, ΔE94 e ΔE2000 com uma interpretação textual: imperceptível (ΔE < 1), perceptível com esforço (1-2), diferente (2-10), muito diferente (10-50) e contraste elevado (50+).

Color Playground: teste em condições reais

O playground apresenta a sua cor em componentes reais de interface: botões, cartões, badges, inputs, alertas, ligações e texto. Vê imediatamente se a sua cor funciona como cor de fundo, cor de botão ou cor de texto — com as pontuações de acessibilidade em tempo real.

Exportação para programadores: 10 formatos de código

Gere o código na sua linguagem: CSS Variables, SCSS, configuração Tailwind, design tokens JSON, TypeScript, Swift (UIColor), Kotlin (Color), Flutter/Dart, React Native (StyleSheet) e Vue. Cada exportação inclui variantes (50-950) e funções (primary, secondary, accent, etc.).

Quem pode beneficiar?

Designers UI/UX que criam paletas e sistemas de design; programadores front-end que integram cores em CSS, Tailwind ou SCSS; designers gráficos que extraem paletas de fotos; equipas de acessibilidade que verificam o contraste WCAG; profissionais de impressão que calculam as ΔE; e qualquer criador que queira explorar cores de forma profissional.

Comparação

Seletor de cor: que ferramenta escolher?

ColorSlurp, Adobe Color, Coolors ou Volade — comparação das funcionalidades principais.

Volade

16 formatos, conta-gotas, harmonias, imagem → paleta, gradiente OKLCH, WCAG + auto-fix, daltonismo, mistura, ΔE, playground, exportação em 10 linguagens. Gratuito, local, sem conta.

ColorSlurp

Excelente para o conta-gotas e formatos (OKLCH, LAB, P3). Sem gradiente, sem daltonismo, sem playground. Aplicação nativa paga.

Adobe Color

Forte em harmonias e serialização. Menos formatos (sem OKLCH). Sem misturador, sem ΔE, sem exportação direta para programadores.

Coolors

Excelente para geração de paletas aleatórias. Editor menos avançado, sem auto-fix WCAG, sem playground. Gratuito com limitações.

Uma licença premium, todas as suas ferramentas web

A sua subscrição Volade desbloqueia todas as nossas ferramentas web, mais o navegador, o CMS, o ambiente de trabalho e os scripts — em todos os seus dispositivos.

Uma licença, todo o ecossistema premium Navegador · CMS · Desktop · Móvel · Scripts · API · Ferramentas · Database
Uma licença, todo o ecossistema Ir para premium Entrar