Guide couleur pratique

Combinaisons de gradients pour fonds CSS

Creez des gradients CSS equilibres pour heros, cartes, boutons et fonds decoratifs.

Verifie et maintenu par Codes Color HTML
Ouvrir l outil lie

Qu est-ce qu un bon gradient ?

Un bon gradient utilise des couleurs reliees : meme famille de teinte, teintes voisines ou transition volontaire chaud vers froid.

Gradients lisibles

Si du texte est place sur un gradient, ajoutez assez de contraste avec overlay sombre, zone de texte solide ou premier plan fort.

Recettes utiles

Bleu vers cyan parait technique, rose vers orange parait chaleureux, violet vers bleu parait digital, vert vers teal parait naturel.

Questions frequentes

Les gradients peuvent-ils nuire a la lisibilite ?

Oui. Le texte sur gradient peut devenir difficile a lire si le contraste n est pas verifie.

Combien de couleurs utiliser dans un gradient ?

Deux couleurs suffisent dans la plupart des interfaces. Trois seulement avec une vraie raison visuelle.

Guides lies

Guide des codes couleurs HTML : HEX, RGB, HSL et noms CSSHEX vers RGB : convertir les codes couleurs pour CSSGuide du contraste WCAG pour des couleurs de texte accessibles