Gerador de esquema de cores para sites
Um tema claro e escuro completo a partir da cor da sua marca.
Escolha a cor da sua marca e receba um esquema pronto para um site ou app: fundos e superfícies tingidos, bordas, texto e texto secundário, uma cor principal ajustada para continuar legível e um destaque combinando, para um tema claro e outro escuro. A prévia mostra um cartão com texto e botões, e o esquema inteiro está pronto para copiar como variáveis CSS, com o tema escuro seguindo a configuração do sistema.
Como criar um esquema de cores para um site
- Etapa 1
Escolha a cor da sua marca.
- Etapa 2
Confira as prévias clara e escura.
- Etapa 3
Copie as variáveis CSS.
Por que usar o PhotoTools
Claro e escuro
Dois temas combinando de uma vez.
Legível desde o início
Principal e destaque com contraste de pelo menos 3:1.
Pronto para código
Variáveis CSS com modo escuro.
Formatos compatíveis
Saída
- CSS
Perguntas frequentes
Por que a cor principal é um pouco diferente da minha?
Se a sua cor for clara ou escura demais em relação ao fundo, ela é ajustada só o necessário para chegar a um contraste de 3:1 e os botões continuarem visíveis.
Como uso o CSS?
Cole na sua folha de estilos e use as variáveis, por exemplo background: var(--color-primary). O tema escuro muda conforme a configuração do sistema.
É grátis?
Sim. As ferramentas do navegador do PhotoTools são grátis, ilimitadas e funcionam sem conta.
Minhas imagens são enviadas para um servidor?
Não. Esta ferramenta funciona inteiramente no seu navegador com WebAssembly. Suas imagens nunca saem do seu dispositivo e nada é armazenado.