Gerar o modo escuro (ou claro) de uma captura de tela
Quer ver como seu app ou site ficaria em modo escuro sem tocar em uma linha de código? Uma captura de tela basta. O Color Studio pode inverter a luminosidade da imagem mantendo as cores —a base real do dark mode— e devolver a versão escura (ou clara) na hora, com um antes/depois para comparar. E se você tem um esquema de cores próprio, pode aplicá-lo. Tudo grátis e no seu navegador: a captura não é enviada a lugar nenhum.
Como funciona o modo Tema
Não é um simples "negativo" da foto. Inverter as cores tal e qual deixa os azuis laranjas e tudo fica ruim. O modo Tema inverte só a luminosidade de cada pixel e mantém o tom e a saturação: por isso um fundo branco fica escuro, o texto preto clareia, e um botão azul continua azul (mais claro). É exatamente o que um bom tema escuro faz.
Passo a passo
- Entre no Color Studio e abra a captura (ou use a imagem que já tem carregada).
- Escolha o modo Tema e o objetivo: Escuro, Claro ou Inverter.
- Compare a original com a versão gerada nos painéis Antes e Depois.
- Baixe o resultado em PNG.
Os objetivos Escuro e Claro só invertem se preciso (conforme a captura já seja clara ou escura); Inverter força a mudança sempre.
Nós testamos: de uma captura clara a um tema escuro
Carregamos uma captura e o modo Escuro inverteu a luminosidade mantendo as cores (com opção de manter os acentos), mostrando antes/depois lado a lado. Com capturas de UI dá um ponto de partida realista; com fotos comuns, um efeito artístico.
O mais útil para desenvolvimento: além da imagem, gera o esquema de cor derivado (escalas 50–900) pronto para copiar como CSS ou Tailwind e colar no projeto. Tudo local, sem enviar a captura.
Aplicar seu próprio esquema de cores
O modo Recolorir vai um passo além: você cola
CSS, umas variáveis :root, um config de
Tailwind ou qualquer texto com cores (HEX,
rgb(), hsl()), e a ferramenta extrai essa paleta e
remapeia a imagem conforme a luminosidade de cada pixel (um
"gradient map"). Serve para ver sua captura com a identidade da sua marca, ou
para explorar variantes de tema a partir de um esquema existente.
Para que serve (e para que não)
- Sim: mockups rápidos de dark mode, explorar paletas, peças para apresentações, ver como uma interface "respira" no escuro antes de programá-la.
- Sim, divertido: jogar fotos quaisquer para ver resultados artísticos e inesperados.
- Não: não substitui implementar o tema escuro real no seu CSS —uma imagem não é uma interface—, mas é a forma mais rápida de visualizar a ideia.
Funciona melhor com capturas de interfaces
Quanto mais "plana" e de interface for a imagem (um app, um site, um painel), melhor fica: os fundos sólidos e o texto respondem perfeito à inversão de luminosidade. Fotografias com degradês e pele dão um resultado mais artístico que utilitário — mas testá-las é parte da graça.
Perguntas frequentes
Realmente converte uma imagem para modo escuro?
Inverte a luminosidade mantendo tom e saturação —a base do modo escuro—: fundos claros escurecem, o texto clareia e as cores permanecem. Funciona muito bem com capturas de UI; com fotos dá um resultado artístico.
Serve para desenhar o modo escuro do meu app ou site?
Como um mockup rápido a partir de uma captura, sem tocar em código. Não substitui implementar o tema no CSS, mas é ideal para explorar a ideia ou mostrar um mockup.
Posso usar meu próprio esquema de cores como referência?
Sim, no modo Recolorir: você cola CSS, variáveis, config de Tailwind ou qualquer texto com cores, e a ferramenta remapeia a imagem com esse esquema.
Minha captura é enviada a um servidor?
Não. Toda a transformação acontece no seu navegador; a captura não é enviada nem fica armazenada.
Gerar o modo escuro da minha captura →Mais guias e ferramentas
Como escolher uma paleta de cores
Papéis, escalas 50–900 e como derivar uma paleta de uma imagem, pronta como CSS ou Tailwind.
Extrair a paleta de cores e ver o HEX
Tire as cores dominantes de uma imagem e leia o HEX de qualquer pixel com um conta-gotas.