Ir para o conteúdo
OneKitly
Criar conta · Entrar

Gerador de esquemas de cor

Derive esquemas complementar, análogo, triádico, tetrádico, dividido e monocromático de uma cor base.

Ferramentas relacionadas

Todas as ferramentas: Cores e CSS →
Verificador de contraste de corRácio de contraste WCAG entre texto e fundo, com aprovado/reprovado AA/AAA e uma pré-visualização.Inversor de corInverta uma cor (255 − RGB) ou obtenha a complementar, em HEX/RGB/HSL/CMYK com o contraste.Seletor de cor de imagemCarregue uma imagem, clique para amostrar qualquer píxel e extraia uma paleta dominante, com HEX e RGB de cada amostra.Gerador de paletas de corCrie uma paleta baseada em harmonia que pode bloquear e regenerar, estilo Coolors, com copiar todos os HEX.Conversor de coresConverte uma cor para HEX, RGB, HSL, HSV, CMYK, LAB e OKLCH, com o contraste.Compressor de CSSMinifique CSS removendo comentários e espaços para reduzir o tamanho da folha de estilos.Laboratório de CSS FlexboxExperimente flex-direction, wrap, justify-content, align-items e gap — pré-visualização ao vivo e CSS para copiar.Gerador de CSS GridConstrua um layout CSS Grid visualmente — colunas, linhas, espaços e alinhamento — com pré-visualização ao vivo e CSS para copiar.

Gerador de esquemas de cor funciona diretamente nesta página — gratuito, instantâneo e sem instalar nada. Encontra-la em Cores e CSS, com Verificador de contraste de cor e Inversor de cor para os casos vizinhos.

Como usar

  1. Abra a ferramenta — sem registo nem instalação.
  2. Introduza os seus dados ou ajuste as opções disponíveis.
  3. Obtenha o seu resultado ao instante e copie-o ou descarregue-o.

Perguntas frequentes

Para que serve Gerador de esquemas de cor?

Derive esquemas complementar, análogo, triádico, tetrádico, dividido e monocromático de uma cor base.

Em que casos se usa na prática?

Levar uma cor de uma ferramenta de design para uma folha de estilos, construir uma paleta em torno de uma cor de marca e verificar se o texto será legível sobre ela.

Qual é o erro mais comum?

Avaliar o contraste a olho. Duas cores que parecem distintas num monitor luminoso podem falhar claramente o rácio de acessibilidade, e é esse rácio que uma auditoria vai medir.

Em que difere Gerador de esquemas de cor de Verificador de contraste de cor?

Estão próximos mas respondem a perguntas diferentes: Verificador de contraste de cor é o que deves abrir quando se trata de rácio de contraste WCAG entre texto e fundo, com aprovado/reprovado AA/AAA e uma pré-visualização. Escolhe o que corresponde ao teu ponto de partida — ambos são gratuitos.

Existe uma ferramenta para o passo seguinte?

Inversor de cor é o mais próximo a seguir a este: Inverta uma cor (255 − RGB) ou obtenha a complementar, em HEX/RGB/HSL/CMYK com o contraste.

Que mais vale a pena ter aberto ao lado?

Seletor de cor de imagem e Gerador de paletas de cor — surgem na mesma tarefa com frequência suficiente para merecerem outro separador.

De onde vêm os dados?

As conversões entre HEX, RGB e HSL são exatas. O contraste segue a fórmula de luminância relativa da WCAG 2; o CMYK depende do dispositivo, pelo que um valor no ecrã é uma aproximação do que será impresso.

Para saber mais

Todos os guias →
ExplicaçãoOs esquemas de cor são geometria numa roda — e a roda está erradaComplementar, tríade, análogo e complementar dividido são apenas rotações: some 180°, 120°, 30° ou 150° a um matiz. A aritmética é trivial. O problema é que o círculo de matizes HSL não é percetualmente uniforme — o amarelo e o azul com a mesma luminosidade HSL diferem 12,85 vezes em luminância — por isso uma paleta gerada tem de ser verificada em contraste depois.ExplicaçãoGradientes, bandas e porque o meio parece turvoInterpolar em sRGB faz a média de números codificados em gama: o ponto médio de vermelho para verde é #808000 quando a resposta a meia-luz é #bcbc00 — menos 57,2 % de luz. As bandas são outro problema aritmético: 8 bits dão 256 degraus, e um gradiente escuro pode ter apenas 28. Eis ambos, calculados.ExplicaçãoRácio de contraste: como a WCAG o calcula realmenteO rácio WCAG é (L1 + 0,05) ÷ (L2 + 0,05), e L é a luminância relativa, não o brilho. O verde carrega 71,52 % e o azul 7,22 %, razão pela qual o azul puro sobre branco passa com 8,59:1 enquanto o cinzento médio falha com 3,95:1. Eis o cálculo inteiro, corrido de ponta a ponta.TutorialHEX vs RGB: como ler e converter coresHEX e RGB são duas notações para as mesmas cores. Eis como ler cada uma, converter entre elas e adicionar transparência.GuiaO que um minificador pode remover e o que não pode tocarA minificação tem de preservar o significado, e o interessante são os espaços que carregam significado: o combinador descendente, os espaços dentro de calc(), o intervalo entre dois elementos em linha. Medido aqui em ficheiros reais, incluindo o que o brotli já lhe ia poupar.GuiaEmbelezar ou minificar: para que serve cada um e o que faz ao pesoQuatro folhas de estilo reais passadas pelo minificador, medidas em bruto e depois de gzip. Retirar todos os espaços poupou 48, 103, 104 e 147 bytes comprimidos; retirar os comentários, 57, 1 358, 2 420 e 1 042. E as cinco entradas que este minificador parte.