# Dégradé ou couleur unie : quand choisir l’un ou l’autre [Canonical HTML page](https://gradiently.design/fr/guide/gradient-vs-flat-color) La couleur unie est claire, économique et exacte. Les dégradés sont vivants, distinctifs et plus difficiles à maîtriser. La plupart des bonnes marques utilisent les deux. Voici comment décider ce dont chaque surface a besoin. ## The short version - La couleur unie l’emporte là où comptent la clarté, la reproduction exacte et les petites tailles, comme les icônes, les commandes d’interface, les fonds de texte courant et l’impression monochrome. - Les dégradés l’emportent là où une surface a besoin d’ambiance, de profondeur ou de caractère, comme les arrière-plans, les couvertures, les bannières, les posts sociaux et les fonds de marque. - Le contraste d’un dégradé varie sur toute sa surface : le texte posé dessus doit donc être vérifié au pire point, pas en moyenne. - La plupart des identités visuelles fortes utilisent un dégradé comme signature et une couleur unie tirée de lui comme solution de secours de tous les jours. - Les écrans sont passés des styles brillants et texturés au flat design au début des années 2010, puis sont revenus vers des dégradés plus doux, si bien qu’aucun des deux n’est simplement moderne ou dépassé. Dans la question **dégradé ou flat design**, aucun camp ne gagne partout. La couleur unie est plus claire, se reproduit exactement et résiste aux très petites tailles comme à l’impression monochrome. Les dégradés portent une ambiance, suggèrent la lumière et la profondeur, et laissent à une marque bien plus de place pour se distinguer. La réponse pratique pour la plupart des marques est d’avoir les deux : un dégradé là où la surface est grande et expressive, et une couleur unie, tirée du dégradé, là où l’usage est petit, fonctionnel ou imprimé en une seule encre. - Violet uni: `linear-gradient(135deg, #6d28d9 0%, #6d28d9 100%)` - Dégradé violet: `linear-gradient(135deg, #2e1065 0%, #6d28d9 55%, #c084fc 100%)` Le même violet en aplat et en dégradé construit autour de lui. L’un est une couleur ; l’autre est une surface éclairée. ## Là où la couleur unie l’emporte - **Petites tailles :** favicons, badges d’application et icônes perdent le détail d’un dégradé, alors qu’une couleur unie reste nette - **Commandes d’interface :** boutons, interrupteurs et états se lisent plus clairement quand chaque état est d’une seule couleur - **Derrière un long texte :** un contraste constant rend chaque ligne également lisible - **Impression monochrome :** broderie, sérigraphie, gravure, tampons et travaux en une seule encre ne peuvent pas reproduire un mélange - **Correspondance exacte :** une couleur d’accompagnement unique se retrouve sur différentes matières bien plus fiablement qu’un mélange - **Graphiques et données :** les couleurs unies gardent les catégories distinctes et comparables ## Là où les dégradés l’emportent - **Grandes surfaces :** arrière-plans, couvertures, bannières et affiches où une couleur unie paraît vide - **Ambiance et lumière :** un mélange suggère une heure du jour, une matière ou une lueur qu’une seule couleur ne peut pas rendre - **Caractère distinctif :** il n’existe qu’un nombre limité de teintes uniques distinguables, et la plupart sont déjà prises dans chaque catégorie - **Fils sociaux :** un champ de dégradé bien construit se remarque dans un défilement de photos et de modèles plats - **Profondeur dans les interfaces :** un dégradé subtil sur une bannière ou une carte principale sépare les couches sans ombres - **Mouvement :** les dégradés peuvent dériver et respirer ; voir [les arrière-plans en dégradé animé](https://gradiently.design/fr/guide/animated-gradient-background) ## Dégradé ou couleur unie, critère par critère | Critère | Couleur unie | Dégradé | | --- | --- | --- | | Lisibilité | Contraste constant partout | Le contraste varie ; vérifiez le pire point | | Reconnaissance | Forte si vous possédez une teinte rare | Forte si la recette reste constante | | Caractère distinctif | Limité par le nombre de teintes | Un immense espace de combinaisons | | Petites tailles | Excellent | Souvent boueux ou perdu | | Impression | Exacte, même en une seule encre | Exige la quadrichromie ; peut faire des bandes ou dériver | | États d’interface | Clairs et prévisibles | Mieux vaut le réserver à une ou deux zones d’accent | | Ambiance et profondeur | Limitées | Excellentes | | Poids du fichier et effort | Négligeables | Faible en CSS, plus lourd en images et en vidéo | La couleur unie est le choix le plus sûr par défaut pour la fonction. Les dégradés sont le choix le plus fort pour l’expression. ## La question de la lisibilité Sur un arrière-plan uni, si un mot passe le contraste, tous les mots le passent. Sur un dégradé, le contraste change avec la couleur : un titre peut se lire parfaitement à un bout et disparaître à l’autre. Mesurez toujours le contraste au point le plus clair derrière un texte clair, ou au point le plus sombre derrière un texte sombre. La méthode complète figure dans [le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) et [le contraste des couleurs et l’accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility). Un post en portrait où un titre traverse à la fois les parties claires et sombres d’un dégradé Un dégradé qui traverse les mots de part en part : le contraste change lettre après lettre. Le même post avec une zone plus calme et plus régulière du dégradé derrière le titre Le même dégradé qui fait de la place aux mots : l’expression reste, la lisibilité revient. ## Un peu d’histoire : le flat, puis de nouveau les dégradés Durant les années 2000, les écrans étaient brillants : boutons biseautés, reflets vitrés et textures imitant le cuir et le papier. Au début des années 2010, les grands systèmes d’exploitation sont passés au flat design, avec des couleurs unies, des icônes simples et aucune fausse profondeur, et une grande partie du web a suivi. À partir du milieu des années 2010, des dégradés plus doux sont revenus, cette fois comme des mélanges lisses de deux ou trois couleurs plutôt que comme des effets brillants, et certaines icônes de marque très visibles ont adopté des dégradés. Plus de détails dans [l’histoire des dégradés](https://gradiently.design/fr/guide/history-of-gradients). La leçon, c’est qu’aucun des deux styles n’est moderne pour toujours. Ce qui date un design, c’est le traitement précis : un brillant marqué date un dégradé, et une palette par défaut date une couleur unie. ## Décider pour chaque surface 1. **Demandez-vous à quoi sert la surface** Si elle aide à agir, lire ou comparer, penchez pour l’uni. Si elle installe une ambiance ou présente la marque, penchez pour le dégradé. 2. **Vérifiez la taille** En dessous de la taille d’une icône environ, utilisez de l’uni. Les dégradés ont besoin de place pour montrer leur mélange. 3. **Vérifiez comment il sera reproduit** Une seule encre, un seul fil ou une gravure : de l’uni. Les écrans et l’impression en couleurs peuvent porter un dégradé. 4. **Vérifiez les mots** Un long texte veut un fond uni ou très calme. Un titre peut se poser sur un dégradé si le contraste tient au pire point. 5. **Gardez-les apparentés** Tirez vos couleurs unies de votre dégradé pour que les deux ressemblent toujours à une seule marque. ### Choisissez l’uni pour - Favicons, badges d’application et petites icônes - Boutons, interrupteurs, onglets et états de formulaire - Pages de texte courant et tableaux de données - Broderie, tampons et impression en une seule encre ### Choisissez un dégradé pour - Couvertures, affiches et posts sociaux - Bannières de sites web et pages de lancement - Fonds de marque derrière logos et titres - Boucles, fonds d’écran et ouvertures de présentation ## Utiliser les deux : un dégradé avec une couleur unie de secours Les systèmes les plus solides traitent le dégradé comme la signature et choisissent une ou deux couleurs unies à l’intérieur pour les usages quotidiens. Le ton le plus profond devient la couleur du texte ou des icônes, un ton moyen la couleur des boutons, et le dégradé lui-même apparaît sur les couvertures, les bannières et les posts. C’est ainsi que l’on obtient expression et fonction sans deux palettes sans lien. [Le dégradé dans l’identité de marque](https://gradiently.design/fr/guide/gradient-branding) détaille la démarche. - Profond : texte et icônes: #2e1065 - Principal : boutons, secours: #6d28d9 - Clair : reflets: #c084fc - Teinte : surfaces discrètes: #f5f3ff Des couleurs unies tirées du dégradé violet ci-dessus. Chacune a un rôle, et ensemble elles s’accordent toujours avec le dégradé. Chaque Mark de Gradiently est un dégradé avec sa propre palette intégrée : les couleurs unies pour le texte, les boutons et les petites tailles viennent donc de la même recette que l’arrière-plan. ## FAQ ### Le flat design vaut-il mieux que les dégradés ? Aucun des deux n’est meilleur partout. La couleur unie convient le mieux aux petites tailles, aux interfaces et à l’impression monochrome ; les dégradés aux grandes surfaces expressives et au caractère distinctif. ### Les dégradés sont-ils dépassés ? Non. Les dégradés brillants et appuyés paraissent datés, mais les dégradés doux de deux ou trois couleurs sont très utilisés dans les identités de marque et les interfaces actuelles. ### Mon logo doit-il être un dégradé ou une couleur unie ? Beaucoup de logos utilisent une version en dégradé pour l’écran en grand format et une version plate pour les petites tailles et l’impression monochrome. Il vous faut de toute façon la version plate. ### Le texte est-il plus difficile à lire sur un dégradé ? Il peut l’être, car le contraste change sur toute la surface du dégradé. Vérifiez le contraste au pire point derrière le texte, ou gardez une zone calme pour les mots. ### Puis-je utiliser ensemble dégradés et couleurs unies ? Oui, et la plupart des marques fortes le font. Tirez les couleurs unies de l’intérieur du dégradé pour que tout s’accorde.