Softonic

Paleta de Cores para Mídias Sociais

Seja projetando um rodapé encontre-nos em ou combinando um fundo de cartão social, cada plataforma tem sua própria cor de marca primária (ou gradiente) e diretrizes de uso. Esta referência lista os códigos hexadecimais oficiais, paradas de gradiente, variantes de modo escuro e razões mínimas de contraste para cada rede social importante, tudo em um só lugar.

Como usar a paleta

  1. 1

    Escolha uma plataforma

    A paleta mostra a cor de marca principal oficial das maiores redes: Facebook, Instagram, LinkedIn, YouTube, TikTok, Pinterest, Reddit e WhatsApp.

  2. 2

    Copie o código hex

    Um clique copia o valor hex para a área de transferência, pronto para colar no CSS, no Figma ou em qualquer ferramenta de design.

  3. 3

    Precisa de gradientes ou mais plataformas

    A tabela de referência abaixo lista as paradas de gradiente, as cores antigas e redes adicionais como Discord, Twitch, Snapchat e Threads.

  4. 4

    Verifique a acessibilidade

    As notas abaixo sinalizam quais cores de marca não atingem o contraste WCAG sobre o branco, para você saber quando adicionar um fundo escuro ou uma sobreposição.

Cores de marca principais

Plataforma Hex primário Notas
Facebook #1877F2 Substitui o antigo #3B5998 de 2019
X (Twitter) #000000 Preto puro desde a rebranding de 2023; legado #1DA1F2 ainda referenciado
Instagram gradiente #405DE6 → #5851DB → #833AB4 → #C13584 → #E1306C → #FD1D1D → #F56040 → #F77737 → #FCAF45 → #FFDC80
TikTok gradiente #25F4EE (ciano) + #FE2C55 (vermelho) em #000000
YouTube #FF0000 Oficial; #FF0033 em marketing mais recente
LinkedIn #0A66C2 Atualizado de #0077B5 em 2021
Snapchat #FFFC00 Amarelo é a marca; ícone fantasma é #FFFFFF
Pinterest #E60023 Usado em botão e logo
WhatsApp #25D366 Com secundário #128C7E
Reddit #FF4500 vermelho-laranja; mascote Snoo branco sobre laranja
Discord #5865F2 Blurple; anterior #7289DA ainda em ativos antigos
Twitch #9146FF Roxo do logo
Threads #000000 Preto com ícone branco
Mastodon #6364FF E #563ACC para hover
GitHub #181717 Segundo Simple Icons; a verdadeira marca é preto do logo

Quando usar cores de marca vs suas próprias

  • Botões de compartilhamento e linhas encontre-nos, use a cor da marca em seu hex nativo. Os usuários a reconhecem.
  • Gráficos de marketing com um ícone de plataforma incorporado, cor da marca para o ícone, sua paleta para o resto.
  • Reposts de UGC, nunca. Não tema seu site no gradiente do Instagram; os usuários pensarão que é conteúdo oficial da Meta.

Notas de acessibilidade

  • #FFFC00 (amarelo do Snapchat) falha no WCAG AA contra branco. Combine com texto preto ou uma sobreposição colorida.
  • #FF0000 (vermelho do YouTube) tem contraste marginal contra branco para texto normal (3.99:1). Use apenas para texto grande ou ícones.
  • #1DA1F2 (azul legado do Twitter) também falha AA contra branco para texto do corpo. Use em um fundo escuro.

Considerações sobre modo escuro

A maioria das plataformas tem variantes de modo escuro mais suaves para sua própria interface:

  • O X em modo escuro usa painéis #1D1D1D, mantendo o preto da marca para acentos.
  • O tema escuro do Instagram usa fundos #000000 com o mesmo gradiente em botões.
  • O modo escuro do LinkedIn mantém #0A66C2, mas renderiza texto em #E7E9EA para contraste.

Perguntas frequentes

Não há uma única. As diretrizes de marca do Instagram especificam o gradiente como a identidade visual primária, com branco ou preto para uso monocromático. Escolher uma única parada de gradiente (como #E1306C) é um compromisso para ícones que devem ser de uma cor.

A maioria das plataformas rebranding a cada poucos anos. O #0077B5 do LinkedIn é o azul antigo; #0A66C2 é o atual. Simple Icons, o gráfico de marcas da Wikipedia e o próprio kit de marca da plataforma às vezes discordam durante transições.

As cores em si não são registradas, você pode pintar qualquer coisa de qualquer cor. O que é registrado é a combinação da cor com o nome ou logo de uma plataforma para implicar endosse. Use as cores da marca funcionalmente (botões de compartilhamento), não decorativamente.

Não, as cores da marca são globais. Sub-marcas regionais (Facebook Marketplace, YouTube Shorts) podem ter suas próprias cores de destaque que se baseiam na matriz.

Ferramentas relacionadas

Gerador de Mensagens de Texto Falsas

Digite uma conversa com os dois lados, confira os balões na prévia e baixe o mockup do celular em PNG. Enviado em verde, recebido em cinza.

Gerador de Tweet Falso

Crie imagens realistas de postagens falsas do Twitter ou X com nome de usuário, texto, respostas, reposts, curtidas, marcadores e cor do selo verificado personalizados.

Gerador de Bio do Instagram

Crie uma bio do Instagram que se encaixe em 150 caracteres, com emojis opcionais, quebras de linha e um único link externo. Contagem de caracteres mostrada ao vivo.

Gerador de Timestamp do Discord

Gere códigos de timestamp do Discord que se ajustam ao fuso horário de cada leitor. Escolha data, hora e estilo para obter tags <t:UNIX> curtas, longas e relativas.

Gerador de Hashtags do Instagram

Escolha um tema, adicione suas próprias palavras-chave e receba hashtags para o Instagram divididas em amplas, específicas e de nicho, com um conjunto pronto de 5, o limite por publicação.

Contador de caracteres do TikTok

Conte caracteres de legendas do TikTok em tempo real, veja o espaço restante em relação ao alvo de 2.200 caracteres e acompanhe os hashtags enquanto escreve.

Ferramenta disponível em outros idiomas