Générateur de couleur aléatoire
Tirez des couleurs au hasard — totalement aléatoires, pastel, sombres ou vives — avec pour chacune l’aperçu, le code HEX et le code RGB, cliquables pour être copiés.
HEX, RGB, HSL : trois écritures, une seule couleur
Une couleur d’écran est un mélange de trois lumières — rouge, vert, bleu — chacune dosée de 0 à 255. rgb(37, 99, 235) et #2563EB désignent exactement la même teinte : le code HEX n’est que l’écriture hexadécimale des trois mêmes nombres, deux chiffres par canal. 25 en base 16 vaut 37, 63 vaut 99, EB vaut 235. Si cette conversion vous intrigue, l’outil texte en hexadécimal illustre le même principe appliqué aux caractères.
Le HSL (teinte, saturation, luminosité) décrit la même couleur autrement : un angle de 0 à 360° sur le cercle chromatique, un pourcentage de saturation, un pourcentage de luminosité. C’est la notation la plus utile pour créer une couleur plutôt que pour la noter, car chaque paramètre correspond à une intention. C’est précisément ce que fait cet outil : les modes pastel, sombre et vif sont des intervalles de saturation et de luminosité.
| Mode | Saturation | Luminosité | Pour quoi faire |
|---|---|---|---|
| Totalement aléatoire | libre | libre | Explorer, sortir de ses habitudes |
| Pastel | 60 à 80 % | 80 à 88 % | Fonds, étiquettes, illustrations douces |
| Sombre | 30 à 60 % | 12 à 24 % | Thème nuit, en-têtes, typographie claire |
| Vif | 85 à 100 % | 45 à 55 % | Boutons, accents, graphiques |
Une couleur au hasard ne fait pas une palette
Le tirage aléatoire sert à trouver un point de départ, pas à composer une identité visuelle. Une palette cohérente se construit à partir d’une ou deux teintes, déclinées : gardez la teinte, faites varier la saturation et la luminosité. Trois ou quatre couleurs suffisent presque toujours — une dominante, une couleur d’accent, un gris neutre pour le texte.
Les combinaisons classiques reposent sur l’angle de teinte : complémentaire à 180°, triade à 120°, analogues à 30°. Un raccourci utile : notez la teinte HSL de la couleur que vous avez retenue, ajoutez ou retirez 30° pour obtenir une voisine harmonieuse, ou 180° pour un contraste franc.
Le contraste n’est pas une question de goût
Une couleur jolie mais illisible est inutilisable. Les règles d’accessibilité WCAG fixent des rapports de contraste minimaux entre un texte et son fond : 4,5:1 pour un texte courant, 3:1 pour un grand texte (à partir de 18,5 px en gras ou 24 px), et 3:1 pour les éléments d’interface comme les bordures de champs. Ces seuils conditionnent aussi la conformité d’un site public en France au référentiel RGAA.
En pratique : les couleurs pastel ne conviennent pas au texte, seulement aux fonds ; les couleurs vives conviennent aux boutons avec un texte blanc, rarement au texte lui-même ; les couleurs sombres sont le bon choix pour la typographie. L’aperçu affiche d’ailleurs chaque code en noir ou en blanc selon la luminance relative de la couleur, exactement par ce calcul.
Dernier point, trop souvent oublié : environ 8 % des hommes perçoivent mal le rouge et le vert. Ne faites jamais reposer une information sur la seule couleur — un graphique, un statut, une alerte doivent aussi se distinguer par un libellé, une forme ou un motif.
Où ces codes se collent
Le code HEX est la forme attendue par la quasi-totalité des outils : CSS, Figma, Canva, Word, la plupart des thèmes de site. Le code RGB sert surtout quand vous devez ajouter une transparence (rgba) ou travailler avec un outil qui ne lit que des valeurs décimales. Pour une signature d’e-mail, utilisez le HEX : c’est le format accepté par tous les clients de messagerie.
Les couleurs sont tirées avec crypto.getRandomValues(), la source d’aléa cryptographique du navigateur : aucune suite de couleurs n’est prévisible ni répétée d’une visite à l’autre. Tout est calculé localement, rien n’est envoyé ni enregistré : notez ou copiez les codes qui vous plaisent, ils disparaissent au rechargement de la page.
Questions fréquentes
Quelle différence entre HEX et RGB ?
Aucune sur le fond : ce sont deux écritures des mêmes trois valeurs de rouge, vert et bleu. #2563EB équivaut à rgb(37, 99, 235). Le HEX est plus compact et plus répandu ; le RGB se prête mieux à l’ajout d’une transparence avec rgba().
Comment obtenir une palette harmonieuse ?
Partez d’une seule couleur tirée au hasard, puis déclinez-la : même teinte, saturations et luminosités différentes. Pour une seconde couleur, décalez la teinte de 30° (voisine douce) ou de 180° (contraste franc). Trois ou quatre couleurs au total suffisent : au-delà, l’ensemble perd sa cohérence.
Les couleurs pastel conviennent-elles au texte ?
Non, presque jamais : leur luminosité élevée les rend illisibles sur fond blanc. Réservez-les aux fonds, aux étiquettes et aux aplats, et utilisez le mode sombre pour la typographie. Le rapport de contraste minimal recommandé pour un texte courant est de 4,5:1.