Como usar a paleta de cores do Divertidamente na prática
A paleta de cores divertidamente é basicamente os seis tons que o filme da Pixar definiu para as emoções da Riley. Alegrura em amarelo, Medo em roxo, Nojinho em verde, Tristeza em azul e Raiva em vermelho. Simples no papel, mas a hora de aplicar isso em um projeto real é onde a coisa fica interessante. Eu já perdi uma manhã inteira tentando fazer um sistema de design que usasse essa paleta de cores divertidamente como base, porque o amarelo da Alegrura no filme é tão saturado e quente que praticamente impossível colocar texto escuro em cima sem que o contraste fique ilegível. A solução foi simples: usar esse amarelo apenas para fundos e elementos grandes, e quando precisar de texto, migrar para um tom mais escuro ou colocar um wrapper com fundo branco. Isso é algo que poucos mentionam.
Paleta de cores divertidamente: os códigos exatos
Aqui estão os valores hex que funcionam como ponto de partida, baseados nas cores oficiais do filme: Alegrura: #FFCC00
Tristeza: #6495ED
Raiva: #E53935
Medo: #AB47BC
Nojinho: #7CB342
O problema é que esses números sozinhos não fazem nada. O amarelo #FFCC00, por exemplo, tem um contraste de aproximadamente 1,3 contra texto branco e 12,5 contra texto preto. Se você estiver trabalhando em algo que precise de acessibilidade AA, esquece usar esse amarelo com texto branco. Use preto ou um cinza bem escuro. Já o verde do Nojinho (#7CB342) é mais fácil de trabalhar. Contraste bom com branco, e não compete visualmente com os outros tons quando combinado. Eu recomendo começar por ele se você está montando um esquema do zero.
Montando um sistema a partir daí
O erro mais comum é pegar as cinco cores e distribuir igualmente pelo layout. Aí você termina com uma tela que parece um arco-íris sem propósito. O segredo é escolher uma cor dominante, uma secundária e usar as outras três como destaque pontual. Por exemplo, num dashboard interno que fiz recentemente, usei o amarelo da Alegrura para ações principais (botões de destaque), o azul da Tristeza para seções informativas, o vermelho da Raiva para alertas e erros, o roxo do Medo para avisos de segurança ou confirmações, e o verde do Nojinho para estados de sucesso ou confirmações positivas. O resto do layout ficou neutro, com branco e cinza claro. O resultado ficou coerente sem parecer que uma criança pintou a tela.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Uma coisa que ninguém avisa: essas cores foram desenhadas para telas de cinema, com brilho e saturação altos. Em monitores profissionais com perfil sRGB padrão, o amarelo e o verde podem parecer mais pálidos do que no filme. Sempre verifique em pelo menos dois dispositivos diferentes antes de Aprovar a paleta final.
Limitações que você precisa saber
A paleta de cores divertidamente é limitada a cinco cores primárias mais derivados. Isso é uma restrição intencional do filme, mas no design de interface isso vira um problema real quando você precisa de variações de tom — estados hover, desabilitado, sobrecarga leve. Você acaba inventando cores que não pertencem ao esquema original e aí o visual perde a identidade. Minha solução prática tem sido criar variações mantendo a matiz original e ajustando apenas saturação e luminosidade. Por exemplo, para o estado hover do botão amarelo, reduzi a luminosidade em cerca de 15%, mantendo a mesma matiz. Ficou reconhecível como parte da família da Alegrura sem quebrar a consistência.
Se o projeto exige mais de cinco cores funcionais, considere usar essa paleta como inspiração emocional e criar um sistema complementar com tons neutros e semânticos separados. Não force quadrado redondo em buraco quadrado.
Download e uso responsável
As cores em si são amplamente documentadas online e disponíveis em diversas ferramentas como Figma, Adobe Color e similar. O importante é lembrar que o nome "Divertidamente" e a abordagem das emoções como cores são propriedade intelectual da Pixar e da Disney. Usar os nomes dos personagens e a estética visual do filme em um produto comercial sem licença é uma questão diferente de usar os tons de cor como referência de design. Eu costumo guardar uma coleção pessoal desses hex codes no meu gerenciador de snippets, organizados por emoção e com as notas de uso que mencionei aqui. Quando alguém pergunta onde conseguir a paleta de cores divertidamente, indico sempre começar pelos valores hex brutos e depois adaptar para o contexto do projeto, em vez de copiar algum preset pronto que pode ter sido ajustado de forma incorreta por outra pessoa.
Cinco cores são pouco para um sistema completo. Cinco cores são muito para um elemento isolado. O equilíbrio está em saber qual lado da régua o seu projeto se encaixa.
