Générateur de palettes et de dégradés

Crée des harmonies de couleurs à partir d’une couleur de base, génère des palettes aléatoires et produit des dégradés à copier en CSS ou à enregistrer en image PNG. Utilisez-le pour choisir les couleurs d’un design, d’une présentation ou d’une page web.

Mode d’emploi

1. Dans « Palette », choisissez une « Couleur de base » et une « Harmonie ». Si elle vous plaît, appuyez sur « Utiliser cette harmonie comme palette ».
2. Appuyez sur « Générer (Espace) » pour obtenir de nouvelles couleurs ; verrouillez celles que vous voulez garder et générez de nouveau.
3. Récupérez les couleurs avec « Copier la liste HEX », « Copier les variables CSS » ou « Enregistrer en image », et appuyez sur « Garder la palette » pour en conserver une pour plus tard.
4. Dans « Dégradé », réglez le « Type », l’« Angle » et les « Points de couleur », puis copiez le code CSS ou appuyez sur « Enregistrer en PNG ».

Fonctionnement

• Les harmonies font tourner la teinte sur la roue chromatique HSL : complémentaire 180°, analogue ±30°, triadique 120°, complémentaire adjacente 150° et 210°, carrée par pas de 90°.
• Les niveaux de contraste suivent les WCAG 2.2 : AA demande 4,5:1, AAA 7:1, et le grand texte 3:1.
• « Simulation de la vision des couleurs » est une approximation fondée sur Machado et al. (2009). Elle ne modifie que les couleurs à l’écran, pas les valeurs copiées ou enregistrées.
• Jusqu’à 40 palettes conservées sont stockées dans ce navigateur, sur cet appareil.

Questions fréquentes

Comment trouver la couleur complémentaire ?

C’est la couleur directement opposée sur la roue chromatique, à 180°. Réglez « Harmonie » sur « Complémentaire » pour la voir, et touchez l’échantillon pour copier sa valeur HEX.

Comment créer un dégradé CSS ?

Dans « Dégradé », touchez la barre pour ajouter des points et réglez leurs couleurs et leurs positions. La zone CSS affiche le code, prêt à être copié.

Pourquoi les couleurs du milieu de mon dégradé paraissent-elles ternes ?

Réglez l’« Espace d’interpolation » sur OKLCH. Les couleurs du milieu restent plus vives, et le CSS reçoit aussi une ligne de repli pour les navigateurs plus anciens.

Comment savoir si un texte sera lisible sur cette couleur ?

Chaque couleur indique le rapport de contraste et le niveau de la couleur de texte la plus lisible, blanc ou noir. Le rapport vaut (L1 + 0,05) ÷ (L2 + 0,05), où L1 et L2 sont les luminances relatives de la couleur la plus claire et de la plus foncée.