Normalmente, as cores usadas em sites ou apps são definidas previamente.
Não é difícil decidir uma paleta de cores em que o brilho e a saturação sejam os mesmos e apenas a matiz (Hue) varie.
Mas há casos em que a saturação e a matiz são iguais, porém são necessários vários níveis de luminosidade, como em textos que vão ficando mais claros ou fundos que vão ficando mais escuros.
Nesse caso, texto, fundo e borda precisam ser definidos cada um com níveis de luminosidade diferentes entre si. Se considerarmos 100% como o nível mais claro, uma caixa com fundo de 96% de luminosidade sobre o branco ainda aparece, mas se 96% de luminosidade for aplicado à cor do texto, ele fica invisível.
Além disso, texto, fundo e borda não são usados isoladamente. Os três são usados em combinação. Ao definir cada cor separadamente e depois combiná-las, pode acontecer de o texto não aparecer sobre o fundo ou de a linha não se distinguir do fundo. Ajustar isso não é fácil.
Se forem introduzidos 4 níveis de luminosidade para texto, fundo e borda, isso gera nada menos que 64 combinações; e, considerando ainda o modo escuro, é preciso criar dois conjuntos dessas 64 combinações.
Por isso, eu criei uma ferramenta CLI que permite configurar a cor e os níveis de luminosidade de texto, fundo e borda, e visualizar todas as combinações de uma só vez.
Ela gera código de cores CSS com base em um arquivo de configuração em formato YAML.
Também oferece uma função de pré-visualização em que todos os níveis de texto, fundo e borda nos modos claro/escuro podem ser vistos de uma só vez, além de testar suas combinações.
Como extra, este programa foi desenvolvido em pair programming com IA usando um LLM local. Eu instruía como o código deveria ser implementado, e deixei o trabalho braçal de programação para a IA.
O ambiente local de LLM é o seguinte.
- CPU: Apple M3 Max 64GB
- Modelo principal de programação: Qwen3.6-35B-A3B
- Modelo quantizado usado na prática: Qwen3.6-35B-A3B-oQ4e-fp16-mtp
- Runtime principal de LLM: oMLX
- Agente de programação: Pi Coding Agent
Ainda não há comentários.