Como usar as cores oficiais de Divertidamente em projetos de design
As cores dos personagens de Divertidamente são mais do que um esquema bonito de paleta. Elas têm uma lógica interna que a Pixar desenvolveu ao longo da produção do filme, e entender como aplicá-las evita que seu projeto fique com cara de decoração infantil genérica. Vou explicar o que cada cor representa, como usá-las na prática, e os problemas que eu já vi acontecer quando alguém pega esses valores sem planejamento.
cores da alegria divertidamente e a paleta completa
Cada emoção tem uma cor fixa. Alegria é o amarelo #FFDC00. Tristeza é o azul #4B9CD3. Medo é roxo #9B59B6. Raiva é vermelho #E74C3C. Nojinho é verde #7DC852. Esses são os valores aproximados que aparecem nos materiais oficiais da Disney/Pixar e nas referências de design disponíveis publicamente. Se você precisa dos valores exatos para produção, considere fazer uma captura da tela oficial e amostrá-la, porque compressão de imagem pode alterar levemente os tons. O problema que eu encontrei na prática: usei esses valores direto num projeto de interface para uma app de saúde mental, e o contraste entre o amarelo da Alegria e fundos claros era simplesmente ilegível. O amarelo #FFDC00 em cima de branco ou off-white some completamente. A solução foi escurecê-lo para algo próximo de #E6B800 quando usamos em texto ou elementos que precisam de legibilidade sobre fundos claros, e manter o amarelo original apenas para fundos ou grandes áreas de cor sólida.
👉 Clique no botão abaixo para saber mais sobre o assunto!
O que muita gente não leva em conta é que essas cores foram desenhadas para funcionar em animação 3D com iluminação dinâmica, não para UI web. Em telas, o verde do Nojinho #7DC852 em cima de fundo branco também tem problemas sérios de contraste. O roxo do Medo funciona razoavelmente bem em texto, mas sobressai demais em áreas grandes. O vermelho da Raiva é o mais perigoso de todos para uso generalizado — ele gera urgência visual por padrão, então usar como cor primária de navegação vai fazer seu usuário se sentir constantemente pressionado. Se o seu projeto é editorial ou de ilustração, a paleta funciona melhor porque você tem controle total sobre fundos e composição. Se é para web ou app, você precisa tratar cada cor individualmente: testar contraste, ajustar saturação, e às vezes substituir por variações mais neutras que mantêm a referência sem quebrar acessibilidade. Eu costumo manter o tom original em logotipos e ilustrações, e criar uma versão "adaptada" para a interface com pelo menos WCAG AA de contraste.
Outro detalhe que passa despercebido: a saturação dessas cores é alta por propósito. Elas precisam funcionar em animação onde a iluminação muda constantemente. Em design estático, essa saturação alta pode cansar a vista rapidamente. Reduzir a saturação em cerca de 15 a 20% costuma resolver sem perder a identidade visual. Teste antes e depois com o olho descansado, não olhando direto depois de horas de trabalho — a adaptação da sua visão distorce a percepção. Se você está buscando os valores prontos para copiar, existem repositórios no GitHub e bancos de cores como Coolors que já listam o esquema completo. Mas eu recomendo sempre verificar contra uma fonte oficial, porque versões não oficiais frequentemente têm desvio de tom, especialmente no azul da Tristeza e no verde do Nojinho. A Pixar não libera oficialmente os códigos hexadecimais em documentação aberta, então qualquer lista que você encontrar é reconstrução de fãs ou equipe.
