cfPRO®
HCT Color System
O modelo CIELAB reflete melhor a visão humana que o RGB. Seu componente L corresponde à percepção humana de luminosidade. O formato LCH, derivado do CIELAB, oferece usabilidade similar ao HSL. No CIELAB, cores com igual Luminosidade aparecem igualmente claras e mantêm proporção de contraste WCAG consistente. Por exemplo, azuis e verdes com Luminosidade 50 parecem uniformes e atingem contraste de 4,5:1 contra o branco, atendendo aos padrões WCAG.
1
Escolha uma cor base
Escolha a cor base da sua paleta de duas formas: use a ferramenta conta-gotas para selecionar visualmente ou insira diretamente o código Hex desejado no campo apropriado.
2
Escolha um nome para a sua coleção de tokens
Comece seu Design System com as cores primitivas: cores da marca, neutras, de alerta e funcionais. Estas cores básicas serão o fundamento para todos os elementos visuais, garantindo consistência no seu design.
3
Escolha o nome para a sua cor
Quanto mais objetivo, melhor. Você pode usar nomes específicos como Azul, Amarelo, Verde, ou nomes semânticos, como por exemplo: Marca, Neutro, Alerta…
4
Check o contraste e a acessibilidade da sua paleta
Ao passar o cursor sobre as cores, você verá os níveis de contrast das cores aplicadas no fundo claro e no fundo escuro. O ideal é que tenha os padrões de conformidade da WCAG (A, AA ou AAA) em pelo menos um dos casos.
5
Baixe o arquivo JSON com
a sua paleta de cores
O formato do arquivo JSON exportado segue rigorosamente as especificações técnicas do Módulo de Formato de Tokens de Design.
6
Importe seus tokens
de cores para o Figma
Importe o arquivo JSON para o Figma usando o plugin Design Tokens Manager. Repita o processo para cada nova cor, e mantenha o mesmo nome da coleção. Para gerar as cores do modo escuro, clique no botão "Inverter Cores" e salve novamente.
Compartilhe!
cfPRO® HCT Color System uses Chroma.js by Gregor Aisch
Copyright 2024 | Released under BSD license
Download .json
Copiar SVG