Como tratar cores com H em layouts e códigos
A maior parte dos projetos que eu vejo travar não é por falta de técnica, mas por falta de clareza sobre o que exatamente é uma cor com letra h. Não é um recurso novo. É uma forma de representar tons que precisam de um canal extra ou de uma conversão específica para que o software ou o navegador exiba exatamente o que o designer pensou. Quando você vê "h" sendo usado junto de uma cor, geralmente está lidando com uma variável que carrega dados de matiz, saturação ou luminosidade de forma explícita, e o erro comum é tentar tratar isso como uma cor hexadecimal pura.
Entendendo a cor com letra h na prática
O problema real começa quando o arquivo vem de outra pessoa ou de um sistema diferente. Eu trabalhei em um projeto onde o time de design entregou uma paleta com dezenas de tons marcados como "h-01", "h-02" e assim por diante. A primeira reação foi tentar converter tudo para HEX diretamente no Figma, mas a saída ficava esbaguaçada. O que acontece é que esses rótulos costumam esconder uma lógica interna de separação entre canal de matiz e os demais. Se você ignora essa lógica, a cor muda quando vai para o código ou para a impressão. Para resolver isso, eu parei de tratar os nomes como se fossem códigos prontos e comecei a mapear o que cada "h" representava no arquivo original. No caso específico, descubri que o número após o "h" indicava um passo dentro de um gradiente de matiz, não uma cor fechada. A solução foi exportar os valores reais de HSL ou Lab do arquivo fonte e usar uma tabela de correspondência simples em planilha. Isso levou cerca de 40 minutos para mapear 60 tons, e depois a entrega para desenvolvimento caiu de dois dias para três horas, porque o time de código não precisava adivinhar o tom.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Uma coisa que poucos ensinam é que cores com letra h frequentemente carregam informações de tonalidade que são perdidas quando você converte para RGB de forma ingênua. O RGB é um modelo aditivo voltado para telas, enquanto essas nomenclaturas costumam ter origem em fluxos que priorizam separação de canais ou controle de impressão. Se você precisa passar essa cor para um ambiente digital, o caminho mais seguro é manter os valores em HSL ou OKLCH enquanto possível e só converter para RGB no último passo, quando o componente já está renderizado. Converter cedo demais costuma gerar dessaturação visível em tons próximos do cinza ou em neon. Outro detalhe que merece atenção é a consistência entre ferramentas. Eu vi bastante gente levar a cor com letra h para o Photoshop, depois para o Illustrator e finalmente para o código, e cada etapa aplicar uma interpretação levemente diferente do mesmo rótulo. O resultado é aquele conjunto de cores que "parece certo" mas varia de tela para tela. A alternativa prática é definir uma única fonte da verdade, seja um arquivo de design system, um JSON de tokens ou até uma paleta salva no seu gerenciador de cores preferido, e nunca permitir que a cor saia desse ponto sem passar por uma validação de valor numérico. Validar significa anotar o H, S e L reais, não apenas conferir visualmente.
Se o seu fluxo envolve impressão, a limitação é mais direta: cores com letra h muitas vezes são uma camada de abstração criada para facilitar o trabalho digital, e isso pode não mapear bem para CMYK sem ajustes manuais. Nesses casos, eu recomendo manter a cor original no domínio digital e criar uma variante dedicada para impressão, com valores CMYK testados em amostra física. Não confie em conversões automáticas de software para acabamentos que exigem controle de tinta, especialmente em tons escuros ou saturados. Para quem quer aplicar isso rapidamente, o procedimento que costuma funcionar é o seguinte. Abra o arquivo de origem, identifique os códigos que começam com h, exporte os valores de cor em HSL ou Lab, organize em uma tabela com colunas para tom, saturação, luminosidade e destino, e então gere os tokens de cor final com base nessa tabela. Na minha experiência, esse processo para um conjunto médio de 50 a 80 cores leva entre 1 hora e 2 horas, dependendo da qualidade do arquivo original. Arquivos bem organizados economizam metade do tempo.
Se você precisa de um ponto de partida concreto, costumo usar exportações diretas do Figma ou do Sketch, seguidas de um script simples de transformação para JSON. Não existe um download único que resolva tudo, porque a chave é o mapeamento correto dos valores, não a ferramenta em si. O que realmente economiza tempo é ter clareza sobre o que o "h" significa no seu contexto e manter esse significado intacto durante toda a transferência entre design e código. Quando essa linha é respeitada, a cor com letra h deixa de ser um problema e passa a ser apenas uma notação útil dentro do fluxo.
