Générateur de couleurs aléatoires

Comment ça marche

Indiquez dans le panneau de gauche le nombre de couleurs souhaité. Avec 6, six lignes apparaissent à droite, chacune donnant la même couleur sous trois écritures, par exemple #D4F4BE · rgb(212, 244, 190) · hsl(95, 70%, 85%). Sous le résultat, chaque couleur reçoit une pastille dont l'étiquette reprend exactement le code HEX de sa ligne : vous retrouvez d'un coup d'œil le code de la pastille qui vous plaît. Le réglage Ton détermine où tombent les couleurs : Pastel donne des tons clairs et doux, Vif des tons lumineux et saturés, Foncé des tons profonds ; Toutes laisse la même chance à chacune des 16,7 millions de couleurs d'écran. Quand un ton est choisi, les couleurs successives avancent sur le cercle chromatique de l'angle d'or (137,5 degrés), si bien que les couleurs d'une même palette ne se ressemblent pas. Chaque changement de réglage fait un nouveau tirage ; effacer puis retaper le nombre aussi. Pour savoir si un texte reste lisible sur une couleur, collez son code HEX dans le vérificateur de contraste des couleurs.

Qu'est-ce que HSL ?

Le HSL décrit une couleur avec trois nombres. H (teinte) est l'angle sur le cercle chromatique : 0 pour le rouge, 120 pour le vert, 240 pour le bleu. S (saturation) indique en pourcentage si la couleur est vive ou grise. L (luminosité) va de 0 %, le noir, à 100 %, le blanc. Ce modèle est plus proche de notre façon de penser les couleurs que le RGB : « plus clair » ou « plus doux » ne demande de changer qu'un seul nombre.

Qu'est-ce que Code couleur HEX ?

Un code couleur HEX écrit côte à côte les canaux rouge, vert et bleu d'une couleur d'écran en nombres hexadécimaux à deux chiffres : dans #D4F4BE, D4 est le rouge (212), F4 le vert (244) et BE le bleu (190). Chaque canal va de 0 à 255, ce qui permet d'écrire 256 × 256 × 256 = 16 777 216 couleurs. C'est l'écriture de couleur la plus courante en CSS, dans les logiciels de graphisme et les chartes graphiques.

Quelle est la différence entre RGB et HSL ?

Les deux décrivent les mêmes couleurs d'écran selon des axes différents. Le RGB indique l'intensité des trois canaux lumineux de l'écran, rouge, vert et bleu : c'est ce que fait réellement l'affichage, mais « un peu plus clair » oblige à changer les trois nombres. Le HSL écrit la même couleur en teinte, saturation et luminosité : pour une version plus claire, il suffit d'augmenter L. Cet outil applique ses limites de ton en HSL et calcule les équivalents RGB et HEX pour l'écran.

Pourquoi les couleurs aléatoires paraissent-elles souvent ternes ?

Tirer au hasard le rouge, le vert et le bleu séparément est la méthode la plus équitable, mais elle ne donne pas des couleurs agréables : la plupart des résultats tombent dans une saturation moyenne, des tons grisâtres ou brunâtres. L'option Toutes fonctionne ainsi volontairement ; elle sert aux données de test, aux espaces réservés ou quand chaque couleur doit vraiment avoir la même chance.

Pour des couleurs destinées à une création, des limites dans l'espace HSL donnent de meilleurs résultats. Le HSL sépare une couleur en teinte (H, de 0 à 360 degrés), saturation (S) et luminosité (L). Gardez la luminosité entre 75 et 90 % et la saturation entre 40 et 70 % : chaque couleur obtenue sera pastel. Les trois options de ton appliquent exactement ce genre de limites, affichées sur la ligne de résultat.

Quelle écriture utiliser, et où ?

Le HEX (#D4F4BE) est l'écriture la plus courte ; le CSS, les logiciels de graphisme et la plupart des sélecteurs de couleur l'acceptent directement. rgb() donne chaque canal en nombre décimal et devient rgba() quand il faut de la transparence. hsl() est le plus simple à ajuster à la main : pour une version plus claire de la même teinte, il suffit d'augmenter le dernier nombre.

Si la palette sert dans une interface, pensez aussi à la couleur du texte : un texte blanc est illisible sur les couleurs pastel et claires, un texte noir sur les couleurs foncées. Collez un HEX de cet outil dans le vérificateur de contraste des couleurs pour mesurer le rapport de contraste WCAG.

Questions fréquentes

Comment générer un code couleur aléatoire ?

Indiquez à gauche le nombre de couleurs et choisissez un ton ; les couleurs apparaissent à droite avec leurs codes HEX, RGB et HSL, et leurs pastilles en dessous. Pour de nouvelles couleurs, changez le réglage ou retapez le nombre.

Comment obtenir des couleurs pastel aléatoires ?

Réglez le ton sur Pastel. L'outil ne produit alors que des couleurs de luminosité comprise entre 75 et 90 % et de saturation entre 40 et 70 %, la zone claire et douce que l'on perçoit comme pastel. Chaque ligne affiche la valeur HSL : vous pouvez vérifier les limites vous-même.

La même couleur peut-elle sortir deux fois ?

Avec Toutes, il y a 16 777 216 couleurs, chacune avec la même probabilité : une répétition est très peu probable. Les options de ton comptent moins de couleurs, mais les couleurs successives sont réparties sur le cercle, les doublons proches sont donc rares dans une même palette. Enregistrez une palette qui vous plaît en .txt avec Télécharger.

Comment les couleurs sont-elles choisies ?

L'outil utilise la source aléatoire sécurisée du navigateur (crypto.getRandomValues) et ramène les nombres dans l'intervalle sans biais de modulo : aucune couleur ni teinte ne sort plus souvent qu'une autre.