Cinco ferramentas relacionadas
O seletor de cores, a extração de imagens, as paletas, os gradientes e o contraste usam a mesma base do estúdio. O seletor de modo abre a página de cada ferramenta.
Estúdio de cores
Escolha cores, extraia paletas de imagens, monte suas próprias paletas, crie gradientes CSS e verifique o contraste do texto.
Selecionar modo
Seletor de cores
Harmonia de cores
Atual
Formatos de cor
Ferramentas relacionadas
Suas estatísticas
0
Cores escolhidas
0
Paletas exportadas
0
Gradientes criados
0
Contrastes verificados
Seletor de cores
Modo mais usado
0%
Pontuação de atividade
Como usar o estúdio de cores
Não foi possível carregar o vídeo. Você pode seguir as instruções abaixo.
O vídeo mostra a interface em inglês.
Clique ou arraste o controle na barra multicolorida para escolher o matiz. Ajuste o brilho e a saturação na área abaixo. Os valores ao lado acompanham as alterações. Nos navegadores compatíveis, você também pode usar “Capturar da tela”.
Ferramentas para trabalhar com cores
Cores de imagens e GIFs
Escolha uma cor da prévia ou extraia uma paleta. GIFs animados têm controles de quadros. O redimensionamento, a decodificação e o agrupamento podem afetar as cores obtidas.
Biblioteca de gradientes CSS
Escolha entre 60 modelos com busca ou crie fundos lineares, radiais, cônicos e multiponto. Confira os limites das exportações de código e imagem antes de usar.
Mostrar mais 3Mostrar menos
Seis harmonias de cores
Experimente cores complementares, análogas, triádicas, complementares divididas, tetrádicas e monocromáticas. Verifique o contraste separadamente antes de usar em textos.
Contraste do texto e do fundo
Compare duas cores sólidas com os quatro limites WCAG AA e AAA para texto. Os filtros aproximados da prévia não comprovam conformidade de acessibilidade.
Experimente ajustar o contraste
O ajuste para AA ou AAA tenta alterar os valores RGB do texto. Ele pode falhar ou mudar o tom. Confira a proporção resultante.
Perguntas frequentes
Quais ferramentas de cores estão disponíveis?
O seletor de cores mostra cinco formatos e seis harmonias. A extração de imagens obtém cores de fotos e quadros de GIF. A ferramenta de paletas edita amostras, o gerador de gradientes cria fundos CSS e o verificador de contraste compara duas cores sólidas com os limites WCAG para texto. O seletor de modo abre cada ferramenta em sua própria página.
Em quais formatos posso copiar uma cor?
O seletor mostra HEX, RGB, HSL, HSV e uma estimativa CMYK. Copie os valores separadamente ou use Copiar todos os formatos. Os campos são somente leitura. Os valores exibidos são arredondados e o CMYK não usa um perfil ICC de impressão.
Posso extrair cores de um GIF animado?
Sim. A ferramenta de extração permite reproduzir GIFs animados e escolher quadros. Selecione uma cor ou extraia uma paleta do quadro escolhido. Animações grandes podem precisar de muita memória.
Quais formatos de imagem posso abrir?
Use um formato que o navegador consiga decodificar, como PNG, JPG ou WebP. HEIC e HEIF têm um decodificador local carregado quando necessário. GIFs animados são decodificados por quadros. A compatibilidade varia conforme o navegador e não há um decodificador próprio de TIFF aqui.
Mostrar mais 10Mostrar menos
Quais harmonias de cores estão disponíveis?
Complementar, Análoga, Tríade, Complementar dividida, Tétrade e Monocromática. Clique em uma amostra sugerida para usá-la como cor atual. Uma harmonia combina cores, mas não verifica a acessibilidade do texto.
Quais gradientes posso criar?
Gradientes lineares, radiais e cônicos aceitam até seis pontos de cor. Os multiponto permitem dez pontos e sobrepõem gradientes radiais CSS. A biblioteca tem 60 modelos. O Tailwind simplifica os gradientes para lineares, o SVG substitui os tipos cônicos e multiponto por lineares e as imagens têm seus próprios limites de renderização. A exportação cônica como imagem exige suporte do Canvas a gradientes cônicos.
Quais proporções de contraste a WCAG exige?
Texto normal precisa de pelo menos 4,5:1 para AA e 7:1 para AAA. Texto grande precisa de 3:1 e 4,5:1, respectivamente. Um resultado aprovado vale para o par de cores e o limite de texto escolhidos, não para o site inteiro.
A ferramenta pode ajustar o contraste por mim?
Ajustar para AA e Ajustar para AAA tentam clarear ou escurecer os canais RGB do texto. O tom pode mudar e o ajuste pode falhar com o fundo atual. Confira a proporção resultante antes de usar a cor.
O que mostram as opções de visão de cores?
Protanopia, Deuteranopia e Tritanopia aplicam filtros CSS simples à prévia. São efeitos visuais aproximados, não modelos validados de visão de cores nem provas de acessibilidade.
Como guardo uma paleta?
Salve como modelo com nome neste navegador ou exporte. Exportar cores oferece arquivos PNG, JPG, SVG e JSON, além da cópia de variáveis CSS. A paleta de trabalho não salva volta para Material quando você abre a página novamente.
Onde fica salvo o histórico de cores?
O histórico compartilhado guarda até 20 registros recentes neste navegador, com o modo de origem. Abra Histórico de cores para consultá-los. Limpar os dados do site pode apagá-los. O histórico não é sincronizado entre dispositivos.
Posso capturar uma cor da tela?
Capturar da tela usa a API EyeDropper quando o navegador e o dispositivo oferecem suporte. Ela exige um contexto seguro e retorna um valor HEX sRGB. Se não estiver disponível, use o controle de matiz e a área de cor.
Para onde vão minhas imagens e modelos?
As imagens escolhidas são processadas neste navegador, sem envio a um servidor de conversão. Os modelos com nome e o histórico recente ficam salvos localmente em IndexedDB. Exporte os resultados importantes antes de limpar os dados do site.
Posso usar o estúdio de cores sem internet?
Os controles e cálculos já carregados podem funcionar sem conexão, mas a página e todos os scripts necessários precisam estar disponíveis. O decodificador HEIC é carregado quando necessário, então abrir um novo arquivo HEIC pode exigir conexão para baixá-lo.
Detalhes técnicos
Valores e harmonias de cores
O seletor converte RGB para HEX, HSL, HSV e uma estimativa CMYK. Os valores são arredondados e os campos de formato são somente leitura. As seis harmonias alteram a matiz ou a luminosidade. A saída CMYK não usa um perfil ICC de impressão.
Prévia da imagem e extração de cores
A amostragem com Canvas lê a prévia redimensionada. A extração automática agrupa amostras RGB com K-means para criar uma paleta de 1 a 20 cores. O navegador decodifica a maioria dos formatos. HEIC e HEIF têm um decodificador local alternativo, e GIFs têm controles de quadros.
Mostrar mais 4Mostrar menos
Cálculo do contraste do texto
A proporção compara a luminância relativa de duas cores sRGB sólidas. AA exige 4,5:1 para texto normal e 3:1 para texto grande. AAA exige 7:1 e 4,5:1. Os resultados usam a proporção sem arredondamento e não comprovam conformidade completa com a WCAG.
Gradientes CSS e limites de exportação
Os tipos linear, radial e cônico usam funções de gradiente CSS. Os multiponto sobrepõem gradientes radiais. O Tailwind gera código linear simplificado e o SVG substitui os tipos cônicos e multiponto por lineares. O Canvas gera PNG e JPG em 1200 × 600 pixels. A exportação cônica exige suporte do Canvas. As proporções fixas e a mistura de cores podem diferir da prévia CSS.
Edição e exportação de paletas
Você pode começar com sete modelos de quatro cores. As amostras podem ser editadas, adicionadas, removidas, bloqueadas e reordenadas. A exportação oferece faixas de cores PNG, JPG ou SVG, arquivo JSON e cópia de variáveis CSS. PNG e JPG permitem larguras de 120 a 7680 pixels. Salve um modelo com nome para manter a paleta entre visitas.
Histórico e modelos no navegador
O histórico contém até 20 registros recentes no armazenamento IndexedDB compartilhado do estúdio. Os modelos com nome salvam cores e ajustes de modo localmente. A disponibilidade e a retenção dos dados dependem do navegador. Não há sincronização automática entre dispositivos.