- O espaço de cores OKLCH, diferente de RGB ou HSL, é baseado na percepção humana, oferecendo resultados mais precisos e previsíveis
- É adequado para melhorar sistemas de design e acessibilidade e se destaca especialmente na representação de cores de ampla gama, como P3, sendo mais compatível com dispositivos modernos
oklch() é um formato de cor fácil de ler e intuitivo, que simplifica a manipulação de cores no código. Ele separa luminosidade (L), croma (C), matiz (H) e opacidade (a)- Junto com as especificações CSS Colors 4/5, os recursos nativos de manipulação de cores estão ficando mais fortes, tornando o OKLCH uma escolha voltada para o futuro
- O ecossistema de Stylelint, plugins do Figma, bibliotecas JS etc. também está evoluindo rapidamente, o que é positivo para a colaboração entre design e desenvolvimento
- Porém, o ecossistema ainda não está maduro, e algumas combinações podem não ser visíveis em todos os monitores
Aplicando OKLCH em projetos
- Encontre os valores de cor existentes no CSS e converta-os para OKLCH; use plugins do Figma ou ferramentas de conversão para copiar e aplicar cores em OKLCH
- Organize as cores no CSS em uma paleta de propriedades personalizadas para melhorar a reutilização e a manutenção
- Use o Stylelint e plugins para detectar e impedir automaticamente o uso de cores fora de OKLCH
- Integre o Stylelint ao ambiente de CI para automatizar a verificação de consistência das cores
Benefícios obtidos após a migração para OKLCH
- Melhor legibilidade do código
- Ajustes de cor previsíveis
- Construção de um sistema de design baseado em cores relativas
- Suporte a representações visuais avançadas, como cores P3
- Melhor potencial de colaboração com a equipe de design
1 comentários
Parece que a conveniência para criar sequências, como em iluminação colorida DMX, e a legibilidade aumentariam bastante.