Guide couleur pratique

Combinaisons de gradients pour fonds CSS

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

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

OKLCH en CSS : guide pratique des couleurs perceptuellesPalette pour mode sombre : contraste, surfaces et UI accessibleDesign tokens couleur : nommer les variables CSS pour une UI evolutive