Há alguns anos, eu estava refatorando o design system da Memed bem quando uma agência de branding entregou nossa paleta renovada. O timing parecia perfeito: cores novas para um sistema novo. O que poderia dar errado?
Acontece que as cores de marca que eles nos deram eram ótimas para o logo e materiais de marketing—era para isso que foram projetadas. Mas uma plataforma de prescrição médica precisa de muito mais do que quatro ou cinco cores de marca. Precisávamos de tons claros para fundos, tons escuros para profundidade, tons intermediários para estados interativos—provavelmente dez passos por cor. A paleta da agência não veio com essas variações, porque por que viria? Manuais de marca focam na identidade central, não em cada nuance de UI.
Então tivemos que “desdobrar” essas cores de marca em rampas completas. Comecei com Google Sheets e fiz uma gambiarra com Apps Script para converter entre modelos de cor e plotar os canais de matiz, saturação e brilho para nossas rampas de cores.
Funcionou de fato, mas agora que LLMs de código são capazes o suficiente para ajudar a construir ferramentas de verdade, decidi transformar essas gambiarras em algo que eu realmente gostaria de usar. Foi assim que o Color Guru nasceu: uma forma de projetar rampas de cores moldando curvas em vez de ajustar códigos hex individuais.
Pensando em curvas
Em UI, geralmente você quer mais passos nos extremos do que no meio. Tons extra claros te dão fundos sutis. Tons extra escuros te dão profundidade. Mas a faixa do meio deve ter contraste mais forte para textos e botões. Isso significa que você quer uma curva de luminância que seja mais íngreme no meio e mais plana nas pontas.
Curvas de Bézier se mostraram exatamente o que eu precisava. Elas permitem que você descreva essa forma uma vez e então gere qualquer número de passos a partir dela. Além disso, já usamos curvas de Bézier o tempo todo para easing de animações, então é território familiar.
Construindo em cima do ColorBox
Definitivamente não sou a primeira pessoa a pensar em rampas de cores dessa forma. O ColorBox v1 do Kevyn Arnott era uma ótima ferramenta de rampas de cores baseada em curvas. Usei por um tempo. Mas conforme continuei trabalhando em design systems, continuei querendo três coisas que ela não tinha:
Primeiro, eu queria ver como saturação e brilho mudam juntos, não apenas como gráficos de linha separados. Quando você plota um contra o outro, consegue identificar problemas que perderia completamente de outra forma—como quando suas cores claras de repente perdem toda a saturação e ficam acinzentadas, ou quando suas cores escuras ficam intensas demais e parecem neon. Esse gráfico Sat×Bri é a visualização diagnóstica que eu gostaria de ter tido na Memed.
Segundo, eu queria controle preciso sobre as formas das curvas. O ColorBox te deixa ver as curvas, o que já é muito. Mas eu queria poder ajustar apenas a ponta clara, ou esticar o meio, ou empacotar mais contraste nos tons escuros—tudo independentemente. Curvas cúbicas de Bézier com pontos de controle individuais te permitem fazer exatamente isso.
Terceiro, eu precisava de uma forma de fixar cores de marca. Tipo quando fizemos o refresh de marca da Memed, a agência nos deu códigos hex específicos, e eu precisava construir uma paleta sistemática inteira em torno deles. Tentar fazer engenharia reversa das configurações de curva para chegar em um código hex exato era impossível. Agora você pode simplesmente digitar o código hex ou clicar em uma cor na prévia, e o Color Guru a posiciona baseado na luminância e você pode moldar o resto da rampa em torno dela.
Como eu realmente uso
Quando estou construindo uma nova paleta—seja uma cor primária, neutros ou cores de status—geralmente sigo esse processo:
-
Escolher quantos passos eu preciso. Não existe resposta certa aqui, mas dez a doze funciona bem para a maioria dos design systems.
-
Fixar quaisquer cores de marca primeiro (se necessário). Se tenho uma cor de marca específica das guidelines, eu fixo ela. O Color Guru a encaixa na rampa baseado na luminância, então moldo as curvas em torno dela. A cor fixada fica no lugar enquanto você ajusta o resto da rampa.
-
Focar na luminância primeiro. Miro em algo em torno de 4-6% de luminância no tom mais escuro e 95% no mais claro. O segredo é garantir que o meio tenha espaço suficiente para contraste forte e as pontas tenham pelo menos 3 tons que variam levemente, para bordas, fundos, estados de hover, etc.
-
Moldar a curva de saturação. Dessaturar os tons claros para que não fiquem acinzentados. Aumentar os escuros para que não fiquem barrosos. Geralmente acabo com uma curva convexa que atinge o pico em torno de 70% do caminho pela rampa, depois suaviza para os tons mais escuros.
-
Adicionar um pouquinho de desvio de matiz (opcional). Lembre que algumas cores têm mais luminância que outras. Você pode usar isso a seu favor. Por exemplo, uma rampa geralmente azul pode ter tons claros tendendo mais para ciano e tons escuros tendendo para roxo. Erik D. Kennedy cobre isso bem no artigo dele Color in UI Design: A (Practical) Framework.
-
Checar o gráfico Sat×Bri. Se vejo um arco suave, está bom. Se tem uma quebra ou a linha dobra sobre si mesma, algo está errado e faço alguns ajustes finos na saturação e brilho. Jeeyoung Jung aprofunda nisso no artigo dele Designing Systematic Colors.
-
Verificar o contraste. A ferramenta mostra taxas de contraste em tempo real, então consigo ver quais combinações atingem 4.5:1 para texto de corpo e 3:1 para textos grandes e elementos de UI. Dessa forma, acessibilidade se incorpora facilmente ao processo de design.
Uma vez que estou satisfeito, posso exportar para o Figma e testar em alguns componentes. Uma vez que está OK, também posso exportar como variáveis CSS, JSON ou texto puro.
Experimente
A ferramenta está no ar em colorguru.design, e o código está no GitHub. Se você achar útil e quiser contribuir, eu ficaria feliz em ver.
Nota: Usei IA para ajudar a estruturar e refinar este post.
Conteúdo: