Estúdio de cores reúne cinco ferramentas. Use “Seletor de cores” para escolher uma cor, “Cores da imagem” para obter cores de uma imagem, “Criador de paletas” para montar uma coleção, “Gerador de gradientes” para criar fundos com transições e “Verificador de contraste” para comparar o texto com o fundo. Cada aba abre uma página própria. Salve ou exporte o trabalho que quiser manter antes de trocar de ferramenta.
Escolha uma cor e copie seu código
Abra “Seletor de cores”. Mova o controle pela faixa de cores para escolher um matiz, como azul ou verde.
Mova o controle dentro do quadrado grande para clarear, escurecer ou reduzir a saturação da cor.
Encontre o formato desejado em “Formatos de cor” e pressione o botão de cópia correspondente.
Cole o valor copiado no aplicativo ou documento em que precisar dele.
Os campos de formato mostram o resultado e não podem ser editados. “Copiar todos os formatos” copia os cinco valores com seus nomes. HEX, RGB, HSL, HSV e CMYK representam a mesma cor de maneiras diferentes.
HEX, RGB e HSL são úteis para definir estilos na web. HSV e CMYK são conversões numéricas, não declarações CSS prontas para colar. O CMYK não considera um perfil de impressora ou papel, por isso não prevê a cor exata da impressão.
“Capturar da tela” abre o conta-gotas do navegador, quando disponível. Escolha um pixel visível para usar sua cor ou pressione Escape para cancelar. Essa função não está disponível em dispositivos de toque e alguns navegadores de computador também não a oferecem.
Encontre cores que combinem
As opções de “Harmonia de cores” sugerem combinações a partir da cor atual. Selecione uma sugestão para torná-la a cor atual e atualizar os valores de formato.
| Opção | Cores sugeridas |
|---|---|
| Complementar | A cor atual e uma cor no lado oposto do círculo cromático. |
| Tríade | Três cores distribuídas em intervalos iguais pelo círculo cromático. |
| Análoga | A cor atual e suas duas vizinhas no círculo cromático. |
| Complementar dividida | A cor atual e duas cores próximas à sua oposta. |
| Tétrade | Quatro cores distribuídas pelo círculo cromático. |
| Monocromática | Variações mais claras e mais escuras do matiz atual. |
Essas sugestões não verificam a legibilidade do texto. Antes de usá-las no texto e no fundo, verifique as duas cores juntas em “Verificador de contraste”. “Salvar como predefinição” salva a cor atual e a harmonia para depois.
Obtenha cores de uma imagem
Abra “Cores da imagem” e adicione uma imagem do seu dispositivo.
Espere as cores sugeridas aparecerem. Altere “Número de cores” se precisar de mais ou menos sugestões.
Clique em uma amostra para selecioná-la e copiar seu valor HEX. O painel da cor selecionada também mostra RGB, HSL, HSV e CMYK.
Clique em outro lugar da imagem para adicionar a cor daquele ponto.
“Número de cores” aceita de 1 a 20 sugestões automáticas. As cores escolhidas manualmente são adicionadas à parte, então a lista final pode ser maior. As sugestões vêm de pixels amostrados e grupos de cores. Elas não contam todas as cores distintas da imagem original.
“Filtrar tons extremos” ignora pixels muito escuros e muito claros ao buscar sugestões. Desative a opção se essas cores forem importantes ou se a imagem for principalmente preta e branca. Alterar essa opção ou “Número de cores” recalcula as sugestões. Em uma imagem estática, isso também substitui as escolhas manuais.
“Mostrar pontos” exibe as marcas de amostragem na imagem. Desativar a opção oculta as marcas sem apagar as cores. Arraste uma marca visível para obter a cor de outro local. Com o mouse, a visualização ampliada ajuda a localizar o ponto exato.
Remova uma amostra pelo seu controle de exclusão. “Remover imagem e recomeçar” pede confirmação antes de remover a imagem atual e suas cores. As predefinições salvas são mantidas.
Imagens grandes podem ser reduzidas para a área de amostragem. Assim, um valor selecionado pode vir da imagem exibida e redimensionada, e não de um pixel intacto na resolução original. A transparência não é tratada como um canal de cor separado.
Escolha cores de um GIF animado
Um GIF animado abre com uma linha do tempo dos quadros. Use os botões anterior e próximo, o controle deslizante ou uma miniatura para escolher um quadro. Você também pode reproduzir e pausar a animação.
Clique na imagem para coletar uma cor do quadro atual. A lista combina as seleções salvas dos quadros usados. Mudar de quadro não extrai automaticamente uma nova paleta de cada um.
Para recalcular as cores automáticas do quadro atual, altere “Número de cores” ou “Filtrar tons extremos”. As seleções de cada quadro do GIF são guardadas separadamente, então cores de outros quadros podem continuar na lista conjunta. Salve uma predefinição de imagem para manter a imagem, as seleções por quadro e as posições de amostragem.
Crie e edite uma paleta
Abra “Criador de paletas” para começar com as cores Material ou escolha outra predefinição rápida. Se você alterou a configuração atual, a aplicação de uma predefinição pode pedir confirmação antes de substituí-la.
“Paleta aleatória” muda as cores desbloqueadas. Bloqueie as que quiser manter e gere a paleta novamente. O bloqueio protege a cor durante a geração aleatória. Ele não impede a edição, a remoção ou a substituição por uma predefinição.
“Adicionar cor” adiciona outra amostra. Cada amostra tem controles para editar e excluir, além de uma alça para mudar sua posição. Pelo menos uma cor precisa permanecer. Clique no valor exibido para copiá-lo e use HEX ou RGB para mudar o formato da cópia.
No computador, “Editar cor” abre o seletor de cores do navegador. Em dispositivos de toque, abre uma janela com controles de cor e campos HEX e RGB. Pressione “Aplicar” para manter a edição ou “Cancelar” para descartá-la.
“Desfazer” e “Refazer” percorrem as alterações recentes da paleta. O histórico mantém até 50 estados durante a sessão atual da página. “Redefinir” pede confirmação antes de restaurar a paleta padrão.
“Modo de foco” mostra a paleta e seus controles em uma área maior. Pressione Escape ou use “Sair do modo de foco” para voltar. A paleta de trabalho recomeça ao recarregar a página. Use “Salvar como predefinição” ou “Baixar paleta” antes de sair.
Baixe ou copie uma coleção de cores
Abra a janela de exportação com “Baixar cores” em “Cores da imagem” ou “Baixar paleta” em “Criador de paletas”. PNG, JPG e SVG criam uma faixa de amostras. “Incluir códigos HEX” e “Incluir códigos RGB” adicionam os rótulos correspondentes à imagem.
JSON baixa os valores de cor como dados estruturados. “Copiar CSS” copia propriedades personalizadas numeradas, como --color-1, que podem ser usadas na folha de estilos de um site. Para PNG e JPG, ajuste “Largura (px)” de 120 a 7680 pixels. A altura é um sexto da largura, arredondada para um pixel inteiro. SVG usa um espaço de coordenadas de 1200 × 200.
A imagem exportada contém as cores coletadas, não a foto importada. Exporte antes de limpar a área de trabalho se quiser um arquivo separado para guardar ou compartilhar.
Crie um gradiente
Abra “Gerador de gradientes” e escolha um tipo de gradiente. Um ponto de cor define uma cor em um ponto específico da transição. Mover o ponto muda onde essa cor aparece.
| Tipo | O que ajustar |
|---|---|
| Linear | Arraste as extremidades para mudar a direção. Mova um ponto intermediário ao longo da linha para mudar a posição da sua cor. |
| Radial | Mova o centro na área de direção e posicione as cores na barra “Pontos de cor”. |
| Cônico | Mova o centro e a alça do ângulo inicial ou digite um ângulo. Defina as cores na barra de pontos. |
| Multiponto | Distribua pontos de cor separados pela área e arraste-os para mudar a sobreposição das regiões coloridas. |
Clique em uma parte vazia da área linear ou multiponto para adicionar uma cor. Nos gradientes radiais e cônicos, clique na barra de pontos. Os tipos linear, radial e cônico permitem até seis pontos. O multiponto permite até dez pontos. Pelo menos dois são mantidos.
Clique em um ponto para editar sua cor. Um clique duplo o remove onde esse gesto é aceito. Em dispositivos de toque, pontos lineares e multiponto também aceitam um toque duplo. Para remover um ponto radial ou cônico, mantenha sua alça pressionada sem mover. Você também pode dar foco a essas alças com Tab e pressionar Delete.
Adicionar uma cor linear redistribui os pontos pela linha existente. “Inverter gradiente” inverte a ordem deles, enquanto “Redefinir direção” restaura a direção ou o centro do tipo atual. A prévia é atualizada durante a edição.
“Gradientes predefinidos” oferece modelos para começar. “Explorar biblioteca” abre uma coleção maior com um campo de busca. Aplicar uma predefinição substitui as configurações atuais do gradiente, com confirmação quando necessário. Use o controle de expansão da prévia para vê-la maior e pressione Escape para voltar.
Use o gradiente em outro lugar
CSS fornece o gradiente usado na prévia. Copie-o para uma declaração background na folha de estilos. SCSS oferece uma variável com o gradiente e um exemplo de uso.
A saída Tailwind simplifica o resultado para uma direção linear e até três cores. Ela pode omitir pontos intermediários, posições exatas e a forma de um gradiente radial, cônico ou multiponto. Use CSS quando esses detalhes forem importantes.
SVG gera marcação vetorial para um gradiente linear ou radial. Gradientes cônicos e multiponto usam uma aproximação linear em SVG, por isso terão outra aparência. O comentário gerado identifica essa substituição.
“Baixar gradiente” exporta um PNG ou JPG de 1200 × 600 pixels. A janela de exportação também permite copiar código CSS, Tailwind, SCSS ou SVG. Confira a imagem exportada no tamanho final, pois suas proporções podem diferir da prévia. Salve a imagem ou o código antes de sair, já que o gradiente de trabalho não é uma predefinição salva.
Verifique se o texto está legível
Abra “Verificador de contraste”.
Digite as cores do texto e do fundo como valores HEX de seis dígitos, incluindo o #, ou escolha cada uma com seu seletor.
Confira a relação de contraste e os quatro resultados AA e AAA.
Se a combinação não atingir o limite, ajuste uma cor ou tente “Ajustar para AA” ou “Ajustar para AAA” e confira o resultado novamente.
Por exemplo, texto preto sobre branco tem uma relação de 21:1. Branco sobre branco tem 1:1. Um número maior indica uma diferença maior de luminância.
| Categoria de texto | Mínimo AA | Mínimo AAA |
|---|---|---|
| Texto normal | 4.5:1 | 7:1 |
| Texto grande | 3:1 | 4.5:1 |
As WCAG consideram grande o texto a partir de 18 pontos, cerca de 24 pixels CSS, ou de 14 pontos em negrito, cerca de 18,7 pixels CSS. Os quatro indicadores mostram as duas categorias ao mesmo tempo. Mudar o tamanho da fonte na prévia não altera a relação entre as cores.
Esses limites vêm das orientações WCAG sobre contraste mínimo e das orientações sobre contraste aprimorado. Uma combinação aprovada não comprova que a página inteira seja acessível.
“Ajustar para AA” e “Ajustar para AAA” tentam clarear ou escurecer o texto sem mudar o fundo. O objetivo são os limites para texto normal. Algumas combinações não podem ser corrigidas por esse método. Nesse caso, escolha outra cor de texto ou de fundo manualmente.
Use um valor completo, como #336699. Um valor incompleto ou inválido mantém a última cor aceita. A relação aparece com duas casas decimais, mas o resultado usa o cálculo sem arredondamento.
Os filtros de cor aproximados mudam apenas a prévia. São efeitos visuais simples, não uma simulação confiável da visão de cores de uma pessoa específica. Eles não alteram o cálculo do contraste.
Guarde predefinições e cores recentes
“Salvar como predefinição” salva uma configuração com nome de “Seletor de cores”, “Cores da imagem”, “Criador de paletas” ou “Verificador de contraste”. Digite um nome e pressione “Salvar predefinição”. “Predefinições” abre a lista salva. No celular, use o botão com ícone de marcador. Selecione uma predefinição para restaurá-la na ferramenta correspondente.
As predefinições ficam neste navegador. Predefinições de imagem podem incluir a imagem importada, suas cores e as posições de amostragem. Elas não são compartilhadas automaticamente com outro dispositivo e podem ser removidas ao limpar os dados do navegador. Baixe cópias dos trabalhos importantes.
“Excluir” remove uma predefinição salva após confirmação. “Limpar tudo” remove toda a coleção salva após confirmação. Nenhuma dessas ações apaga os arquivos originais do dispositivo.
“Histórico de cores” mantém até 20 registros recentes. Selecionar um registro copia seu valor HEX e, em “Seletor de cores”, também aplica a cor. Limpar o histórico de cores é uma ação separada da exclusão de predefinições.
Se o resultado parecer errado
Se uma imagem não abrir, tente um JPG ou PNG menor. HEIC e HEIF têm um decodificador adicional. O suporte a outras variantes depende do navegador. Só é possível abrir uma imagem por vez.
Se as cores extraídas não representarem o detalhe desejado, clique nessa área manualmente. Desative “Filtrar tons extremos” quando precisar de cores quase pretas ou quase brancas. As sugestões automáticas representam grupos de cores amostradas. A média de um grupo pode não existir como um pixel exato na imagem.
Se o gradiente copiado diferir da prévia, confira o formato do código. Tailwind e algumas saídas SVG são aproximações. CSS preserva o tipo de gradiente e as posições.
Se a cópia estiver bloqueada em “Seletor de cores” ou “Cores da imagem”, selecione o valor no campo de saída e use o comando de cópia habitual. Para uma paleta, exporte JSON ou uma imagem. O processamento e as coleções salvas ficam no navegador, mas o armazenamento dele não substitui um backup.
Use o teclado
| Ação | Teclas |
|---|---|
| Mover entre os controles | Tab |
| Ativar o botão em foco | Enter |
| Copiar o texto selecionado de um campo de saída |
MacCommand + C
Windows / LinuxCtrl + C
|
| Fechar o histórico, as predefinições, a exportação ou a prévia do gradienteEscape também sai do modo de foco da paleta. | Escape |
| Editar o ponto radial ou cônico em focoPrimeiro use Tab para dar foco à alça do ponto. | Enter ou Espaço |
| Remover o ponto radial ou cônico em focoPelo menos dois pontos permanecem. Isso não se aplica aos pontos do painel linear. | Delete ou Backspace |
| Confirmar a quantidade de cores ou o tamanho de fonte digitadoCom o campo numérico correspondente em foco. | Enter |
A paleta usa os botões “Desfazer” e “Refazer”. A ferramenta não atribui Cmd + Z ou Ctrl + Z às alterações da paleta. Esses atalhos continuam funcionando normalmente na edição de texto.