Interpolation des couleurs CSS : Maîtriser les transitions de dégradés fluides

Les dégradés sont un outil puissant pour ajouter un intérêt visuel et de la profondeur aux conceptions Web. Cependant, obtenir des dégradés vraiment fluides et naturels peut être difficile. C'est là qu'intervient l'interpolation des couleurs CSS. Ce billet de blog explore les subtilités de l'interpolation des couleurs, en examinant différents espaces colorimétriques et techniques pour créer des transitions de dégradés époustouflantes.

Qu'est-ce que l'interpolation des couleurs ?

L'interpolation des couleurs est le processus de calcul des couleurs intermédiaires entre deux couleurs ou plus spécifiées. Dans le contexte des dégradés CSS, elle détermine les couleurs qui remplissent l'espace entre les couleurs de départ et de fin du dégradé. L'espace colorimétrique par défaut pour l'interpolation en CSS est sRGB, mais cela conduit souvent à des dégradés désaturés ou boueux, en particulier lors de la transition entre des couleurs fortement contrastées.

Le problème avec sRGB

L'espace colorimétrique sRGB (standard Red Green Blue) est un espace colorimétrique courant et largement pris en charge, mais il n'est pas perceptuellement uniforme. Cela signifie que des changements égaux dans les valeurs de couleur sRGB ne correspondent pas nécessairement à des changements égaux dans la couleur perçue. Par conséquent, les dégradés interpolés en sRGB peuvent présenter plusieurs effets indésirables :

• Désaturation : Les couleurs intermédiaires peuvent apparaître moins saturées que les couleurs de départ et de fin, ce qui entraîne un dégradé terne.
• Bandes grises : Des bandes de couleurs grises ou presque grises peuvent apparaître dans le dégradé, en particulier lors de la transition entre des couleurs complémentaires.
• Changement perceptuel inégal : Le taux de changement de couleur peut ne pas être cohérent sur l'ensemble du dégradé, ce qui donne une apparence non naturelle.

Ces problèmes sont plus prononcés lorsqu'il s'agit d'écrans à large gamme, car les limites de sRGB deviennent plus apparentes.

Entrez Oklab et Oklch

Heureusement, les CSS modernes offrent des alternatives à sRGB pour l'interpolation des couleurs. Deux espaces colorimétriques particulièrement prometteurs sont Oklab et Oklch. Ces espaces colorimétriques sont perceptuellement uniformes, ce qui signifie que des changements égaux dans les valeurs de couleur correspondent à des changements à peu près égaux dans la couleur perçue.

• Oklab : Un espace colorimétrique perceptuellement uniforme basé sur la vision humaine. Il est bien adapté à la manipulation et à l'interpolation de couleurs à usage général.
• Oklch : Une version cylindrique d'Oklab, représentant les couleurs en termes de luminosité (L), de chrominance (C, environ saturation) et de teinte (H). Cela le rend particulièrement utile pour créer des dégradés où vous souhaitez contrôler indépendamment la teinte et la saturation.

L'utilisation d'Oklab ou d'Oklch pour l'interpolation des couleurs donne des dégradés nettement plus lisses, plus vibrants et plus précis sur le plan perceptuel.

Comment utiliser Oklab et Oklch en CSS

Pour spécifier l'espace colorimétrique de l'interpolation de dégradé, vous pouvez utiliser la propriété color-interpolation-mode (bien que la prise en charge du navigateur ne soit pas encore universelle, et l'approche la plus courante consiste à définir explicitement les couleurs à l'aide des nouvelles fonctions de couleur) :

            .gradient {
  background: linear-gradient(in oklab, red, blue);
  /* Ou en utilisant des fonctions de couleur plus récentes */
  background: linear-gradient(oklab(0.6 0.2 0.8), oklab(0.8 0.5 0.3));
}

            

              
                Copy
              
            
          

Alternativement, et plus couramment actuellement, vous pouvez définir directement vos couleurs à l'aide des fonctions de couleur oklab() et oklch() dans vos définitions de dégradé :

            .gradient {
  background: linear-gradient(oklab(0.6 0.2 0.8), oklab(0.8 0.5 0.3));
}

.gradient-circular {
  background: radial-gradient(circle, oklch(80% 0.6 200), oklch(60% 0.4 300));
}

.gradient-conic {
  background: conic-gradient(from 90deg, oklch(80% 0.6 200), oklch(60% 0.4 300), oklch(80% 0.6 200));
}

            

              
                Copy
              
            
          

Voici une décomposition de la syntaxe :

• oklab(L a b) : Définit une couleur dans l'espace colorimétrique Oklab.
• L : Luminosité (0 à 1)
• a : Chromaticité vert-rouge (-0.4 à 0.4)
• b : Chromaticité bleu-jaune (-0.4 à 0.4)
• oklch(L C H) : Définit une couleur dans l'espace colorimétrique Oklch.
• L : Luminosité (0 à 1 ou 0% à 100%)
• C : Chrominance (0 à environ 0.4, mais peut être plus élevée)
• H : Teinte (0 à 360 degrés)

Exemples et cas d'utilisation

Jetons un coup d'œil à quelques exemples pratiques sur la façon d'utiliser Oklab et Oklch pour créer divers types de dégradés :

Dégradés linéaires

Les dégradés linéaires créent une transition fluide entre les couleurs le long d'une ligne droite. L'utilisation d'Oklab ou d'Oklch améliore considérablement la fluidité perçue. Par exemple, créer un dégradé sur le thème du coucher de soleil :

            .sunset-gradient {
  background: linear-gradient(to bottom, oklch(90% 0.1 40), oklch(60% 0.3 50), oklch(30% 0.4 30));
  height: 200px;
  width: 300px;
}

            

              
                Copy
              
            
          

Dégradés radiaux

Les dégradés radiaux émanent d'un point central. Oklch est particulièrement utile ici pour contrôler l'impact visuel et créer des effets plus artistiques.

            .spotlight-gradient {
  background: radial-gradient(circle at center, oklch(95% 0.05 200), oklch(50% 0.4 220), oklch(10% 0.05 240));
  height: 200px;
  width: 300px;
}

            

              
                Copy
              
            
          

Dégradés coniques

Les dégradés coniques créent des transitions de couleurs autour d'un point central, comme une roue chromatique. Ils sont parfaits pour créer des diagrammes circulaires, des sélecteurs de couleurs ou d'autres éléments visuels circulaires. La gestion de la teinte et de la chrominance dans Oklch devient essentielle pour éviter les régions ternes.

            .color-wheel-gradient {
  background: conic-gradient(
    from 90deg,
    oklch(80% 0.5 0),   /* Rouge */
    oklch(80% 0.5 60),  /* Jaune */
    oklch(80% 0.5 120), /* Vert */
    oklch(80% 0.5 180), /* Cyan */
    oklch(80% 0.5 240), /* Bleu */
    oklch(80% 0.5 300), /* Magenta */
    oklch(80% 0.5 0)    /* Rouge (encore) */
  );
  height: 200px;
  width: 200px;
  border-radius: 50%;
}

            

              
                Copy
              
            
          

Création de fonds subtils

Les dégradés peuvent être utilisés pour créer des effets d'arrière-plan subtils qui ajoutent de la profondeur et de l'intérêt visuel sans être trop distrayants. Oklab et Oklch sont idéaux pour cela, vous permettant de créer des changements de couleur très doux.

            .subtle-background {
  background: linear-gradient(to bottom, oklab(0.98 0.005 0.005), oklab(0.99 0.002 0.002));
  height: 400px;
  width: 600px;
}

            

              
                Copy
              
            
          

Aller au-delà de deux couleurs : arrêts de couleur et transitions

Les dégradés ne se limitent pas à deux couleurs. Vous pouvez ajouter plusieurs arrêts de couleur pour créer des transitions plus complexes et nuancées. Oklab et Oklch continuent d'offrir des avantages avec plusieurs arrêts, en particulier lorsqu'ils sont combinés avec des transitions ou des animations CSS.

Par exemple, un dégradé animé fluide qui parcourt différentes teintes en utilisant Oklch peut créer un effet de chargement ou d'arrière-plan visuellement attrayant :

            .animated-gradient {
  background: linear-gradient(to right, oklch(70% 0.4 0), oklch(70% 0.4 120), oklch(70% 0.4 240), oklch(70% 0.4 360));
  background-size: 400% 100%;
  animation: gradientAnimation 10s linear infinite;
  height: 200px;
  width: 400px;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

            

              
                Copy
              
            
          

Conseils pour une conception de dégradé efficace

Voici quelques conseils pour vous aider à créer des dégradés efficaces et visuellement attrayants :

• Utilisez Oklab ou Oklch : Comme mentionné, ces espaces colorimétriques donnent des résultats supérieurs à sRGB.
• Choisissez des couleurs harmonieuses : Sélectionnez des couleurs qui se complètent et créent un effet visuel agréable. Les outils de palette de couleurs peuvent être utiles. Tenez compte de la marque globale et de l'esthétique de votre site Web.
• Considérez la luminosité et le contraste : Assurez-vous qu'il y a suffisamment de contraste entre les couleurs de votre dégradé pour maintenir la lisibilité, surtout si le dégradé est utilisé comme arrière-plan pour du texte.
• Utilisez des dégradés subtils : Pour les arrière-plans et autres éléments décoratifs, les dégradés subtils fonctionnent souvent mieux. Évitez les transitions de couleurs trop dures ou choquantes.
• Expérimentez avec les arrêts de couleur : N'ayez pas peur d'ajouter plusieurs arrêts de couleur pour créer des dégradés plus complexes et intéressants.
• Testez sur différents appareils : Les dégradés peuvent apparaître différemment sur différents écrans. Testez vos dégradés sur une variété d'appareils et de navigateurs pour vous assurer qu'ils ont l'apparence souhaitée.
• Pensez à l'accessibilité : Bien que les dégradés puissent être visuellement attrayants, privilégiez toujours l'accessibilité. Assurez un contraste suffisant pour les utilisateurs malvoyants, et envisagez de fournir du texte ou un style alternatif pour les utilisateurs qui ont du mal à percevoir les couleurs.
• Comprenez le contexte : Le meilleur type de dégradé dépend du contexte. Un dégradé vibrant et accrocheur peut convenir à un bouton d'appel à l'action, tandis qu'un dégradé subtil et atténué peut être mieux adapté à un arrière-plan.

Prise en charge du navigateur et solutions de secours

La prise en charge d'Oklab et d'Oklch est généralement bonne dans les navigateurs modernes, mais il est essentiel de fournir des solutions de secours pour les anciens navigateurs qui ne prennent pas en charge ces espaces colorimétriques. Vous pouvez le faire en fournissant un dégradé de secours utilisant des couleurs sRGB :

            .gradient {
  background: linear-gradient(red, blue); /* Solution de secours pour les anciens navigateurs */
  background: linear-gradient(oklab(0.6 0.2 0.8), oklab(0.8 0.5 0.3));
}

            

              
                Copy
              
            
          

Les navigateurs qui prennent en charge Oklab et Oklch utiliseront la deuxième déclaration background, tandis que les anciens navigateurs se rabattront sur la première.

Vous pouvez également utiliser des requêtes de fonctionnalités (@supports) pour appliquer conditionnellement des styles en fonction de la prise en charge du navigateur :

            .gradient {
  background: linear-gradient(red, blue); /* Solution de secours */
}

@supports (color: oklab(0 0 0)) {
  .gradient {
    background: linear-gradient(oklab(0.6 0.2 0.8), oklab(0.8 0.5 0.3));
  }
}

            

              
                Copy
              
            
          

Au-delà des dégradés : interpolation des couleurs dans d'autres propriétés CSS

Bien que ce billet se concentre sur les dégradés, les principes d'interpolation des couleurs s'appliquent également à d'autres propriétés CSS, telles que les transitions et les animations. Lors de l'animation des propriétés de couleur, l'utilisation d'espaces colorimétriques perceptuellement uniformes comme Oklab ou Oklch peut conduire à des animations plus fluides et plus naturelles.

Conclusion

L'interpolation des couleurs CSS est une technique puissante pour créer des transitions de dégradés visuellement attrayantes et fluides. En comprenant les limites de sRGB et en exploitant des espaces colorimétriques alternatifs comme Oklab et Oklch, vous pouvez créer des dégradés plus vibrants, naturels et précis sur le plan perceptuel. Expérimentez avec différentes combinaisons de couleurs, arrêts de couleur et types de dégradés pour découvrir les possibilités infinies des dégradés CSS. N'oubliez pas de tenir compte de la prise en charge du navigateur et de fournir des solutions de secours pour les anciens navigateurs. Avec une planification minutieuse et une attention aux détails, vous pouvez utiliser les dégradés pour améliorer l'attrait visuel et l'expérience utilisateur de vos sites Web.