Dans son article, Josh W. Comeau explore les défis et solutions pour créer des effets de décalage de couleurs dynamiques en CSS, notamment pour des animations de particules. Il explique d’abord comment générer des couleurs aléatoires en HSL pour une cohérence visuelle, mais souligne une limitation majeure : les navigateurs interpolent les couleurs en RGB, ce qui produit des teintes grisées et peu naturelles lors des transitions entre deux couleurs HSL. Par exemple, une transition entre rouge et turquoise passe par du gris, car les canaux RGB convergent vers des valeurs similaires. Pour contourner ce problème, il propose d’utiliser la propriété CSS filter: hue-rotate()
, qui permet de faire tourner la teinte de manière fluide et naturelle autour de la roue chromatique, sans perte de saturation. Il partage aussi des astuces pour ajouter des effets de scintillement aléatoires aux particules, améliorant ainsi le réalisme de l’animation.
25751 shaares