Besoin d'une couleur pour une maquette, un graphique ou une page blanche, et vous préférez ne pas en choisir une par habitude ? Ce générateur gratuit de couleurs aléatoires puise les couleurs dans toute la plage de 24 bits qu'un écran peut afficher et place chacune sur un échantillon à côté de son code. Choisissez combien vous en voulez dans Quantité — de 1 à 50 —, cochez les formats dont vous avez besoin et cliquez sur Générer. La page s'ouvre sur une seule couleur en HEX, si bien que le premier résultat n'est qu'à un clic. La case Code HEX est cochée dès le départ, Code RGB et Code HSL se trouvent juste à côté, et n'importe quelle combinaison des trois peut être activée en même temps. Le bouton en forme d'engrenage à côté du bouton Générer ouvre la section Paramètres avancés, où vous pouvez limiter les couleurs à un type ou une plage, exclure les répétitions et changer la façon dont HEX est écrit.
Chaque couleur est créée dans votre navigateur via la Web Crypto API (crypto.getRandomValues), qui fournit des octets aléatoires cryptographiquement forts à partir de la propre source d'aléa de votre système, plutôt que par une fonction pseudo-aléatoire comme Math.random(). Une couleur à l'écran se compose de trois canaux — rouge, vert et bleu —, chacun un nombre entier de 0 à 255, et un octet aléatoire peut prendre exactement 256 valeurs. Chaque canal est donc simplement un octet, sans étape intermédiaire : aucun reste n'est pris, et aucune étape de conversion ne favorise une teinte. Cela rend les 16 777 216 couleurs que la page peut produire exactement équiprobables, à chaque fois que vous cliquez sur Générer. Une plage plus étroite dans la section Paramètres avancés tient cette promesse à l'intérieur de la plage : les couleurs sont toujours tirées de tout l'espace, et celles qui tombent en dehors sont écartées, si bien que chaque couleur autorisée par la plage a la même chance. Rien n'est envoyé à un serveur, rien n'est enregistré, et une fois la page chargée, elle continue de fonctionner même sans connexion.
Les trois formats décrivent la même couleur de trois façons. Le format Code HEX est la forme à six chiffres utilisée dans le CSS et la plupart des outils de conception, comme #0778ff ; elle s'écrit en minuscules avec un # au début, et les options Majuscules et Sans # de la section Paramètres avancés changent cela pour les outils qui l'attendent autrement. Le format Code RGB détaille les trois canaux, comme dans rgb(7, 120, 255), ce qui convient au code qui traite chaque canal séparément. Le format Code HSL décrit la couleur par la teinte, la saturation et la luminosité, comme dans hsl(213, 100%, 51%), la forme la plus facile à ajuster ensuite à la main. Les trois se collent directement dans une feuille de style. Ils ne sont cependant pas également précis. HEX et RGB sont exacts ; HSL est arrondi. La page écrit la teinte, la saturation et la luminosité sous forme de nombres entiers, et pour environ 89% des couleurs, cette valeur arrondie ne redonne pas exactement la même couleur en la reconvertissant : #646503 s'affiche comme hsl(61, 94%, 20%), qui redonne #616303 une fois reconverti. La différence n'est jamais supérieure à 5 unités sur un canal, et le plus souvent de 1 ou 2 — invisible à l'écran, mais réelle si vous enregistrez la valeur HSL et comptez retrouver le HEX d'origine. Enregistrez plutôt la valeur HEX ou RGB.
Une seule couleur apparaît comme une pastille unique au milieu du résultat ; plusieurs apparaissent comme une liste numérotée, une couleur par ligne, avec les formats choisis côte à côte et un petit badge de contraste à la fin. Une liste de plus de trois couleurs défile à l'intérieur de l'encadré, et la flèche dans son coin la déploie sur toute sa hauteur ; la page se souvient de la façon dont vous l'avez laissée. Cliquez sur n'importe quel code pour copier seulement ce code. Le bouton de copie à la fin d'une ligne copie tous les codes de cette couleur sur une seule ligne, séparés par des espaces. Cliquez sur l'échantillon lui-même et le sélecteur de couleur de votre navigateur s'ouvre : choisissez-y une autre couleur, et tous les codes de cette ligne sont réécrits en conséquence, dans chaque format que vous avez activé, ainsi que son badge. Le bouton Tout copier copie le lot entier, une couleur par ligne, et Sauvegarder dans un fichier écrit le même texte dans un simple fichier .txt ; les deux tiennent compte de toute couleur que vous avez changée dans le sélecteur. Historique conserve vos 10 derniers lots dans ce navigateur, exactement tels qu'ils ont été générés, et Effacer vide le résultat. Vos réglages, y compris ceux de la section Paramètres avancés, sont mémorisés pour la prochaine visite.
Des couleurs équiprobables n'ont pas l'air réparties uniformément, et savoir à quoi s'attendre évite de cliquer sur Générer pour la mauvaise raison. D'après les mesures sur toute la plage, environ 35% des couleurs sont vives et saturées, avec une saturation HSL d'au moins 70% et une luminosité entre 35% et 65%. Les couleurs presque grises, avec une saturation inférieure à 20%, ne représentent qu'environ 4%, et les couleurs très sombres (luminosité inférieure à 20%) et très claires (supérieure à 80%) représentent chacune environ 3%. Donc un lot de dix couleurs avec le type Toutes les couleurs contiendra généralement plusieurs couleurs franches et rarement un pastel ou un gris anthracite. Quand vous avez besoin d'un type particulier, choisissez-le dans Type de couleur : Vif correspond exactement à ce groupe, et Pastel, Foncé, Sourd et Niveaux de gris chacun au leur. Personnalisé vous permet de définir vos propres plages de Teinte, Saturation et Luminosité, et une plage de teinte peut passer par 0, si bien que de 330 à 30 donne des rouges. La plage est vérifiée par rapport au code HSL que la page affiche, si bien qu'aucun code n'en sort, et si elle contient trop peu de couleurs pour la valeur de Quantité, la page vous demande de l'élargir plutôt que de répéter des couleurs. Sinon, des répétitions sont possibles mais rares : cochez Sans doublons pour les exclure, et sans cette option, la probabilité que deux des 50 couleurs tirées de toute la plage soient identiques est d'environ 1 sur 13 700.
Une couleur aléatoire sert souvent d'arrière-plan, ce qui pose la seule question qu'un échantillon ne peut pas résoudre à l'œil : le texte sur ce fond sera-t-il lisible ? La directive d'accessibilité web, WCAG, exige un taux de contraste d'au moins 4,5:1 pour le texte normal. D'après les mesures sur toutes les couleurs que cette page peut produire, le texte noir l'atteint sur environ 65% d'entre elles et le texte blanc sur environ 36%, et il n'y a aucune couleur où les deux échouent : le meilleur des deux atteint toujours au moins 4,58:1. Donc pour n'importe quel arrière-plan aléatoire, le texte noir ou le texte blanc sera conforme, et la page vous montre lequel. Un badge apparaît sur chaque couleur, affichant Aa dans la plus lisible des deux couleurs de texte, suivi du taux de contraste. Le taux est arrondi vers le bas, si bien qu'il n'est jamais surestimé, et il se met à jour quand vous changez la couleur dans le sélecteur. Le badge ne compare que le texte noir et blanc ; pour une couleur de marque ou toute autre couleur de texte, passez la paire dans un vérificateur de contraste.
L'aléatoire n'est pas la même chose que l'harmonieux. Chaque couleur d'un lot est tirée indépendamment, sans connaissance des autres, si bien que le générateur ne construit jamais une palette au sens du designer — pas de paires complémentaires, pas de séries analogues, pas de luminosité partagée. Une plage plus étroite change le caractère d'un lot, pas cette règle : des pastels ou une série de bleus arrivent quand même un par un, sans rien qui les relie. C'est justement l'intérêt : il vous donne la couleur que vous n'auriez pas choisie vous-même, et c'est ce qui brise une habitude ou un blocage créatif. Pour transformer une trouvaille aléatoire en quelque chose d'utilisable, conservez la couleur que vous aimez et construisez à partir d'elle, plutôt que de cliquer sur Générer jusqu'à ce qu'un ensemble entier concorde par hasard. Gardez sa teinte fixe et ajustez la luminosité pour obtenir des variantes plus claires ou plus sombres, ou faites pivoter la teinte de 180 degrés pour obtenir une couleur contrastante. Le format Code HSL est celui qui transforme ces gestes en calcul plutôt qu'en tâtonnement.
Pourquoi choisir ce générateur de couleurs aléatoires ?
- Chaque couleur créée dans votre navigateur avec la Web Crypto API, rien n'est envoyé
- Les 16 777 216 couleurs exactement équiprobables, un octet aléatoire par canal
- Codes HEX, RGB et HSL pour la même couleur, dans n'importe quelle combinaison
- Jusqu'à 50 couleurs à la fois, chacune sur un échantillon avec un badge de contraste de texte
- Vif, Pastel, Foncé, Sourd et Niveaux de gris, ou votre propre plage de teinte, saturation et luminosité
- Sans doublons quand vous en avez besoin, et HEX en majuscules ou sans #
- Cliquez sur un code pour le copier, ou changez n'importe quelle couleur dans le sélecteur de couleur de votre navigateur
- Tout copier, Sauvegarder dans un fichier et un Historique de vos 10 derniers lots, conservé dans votre navigateur
- Gratuit et illimité : pas d'inscription, pas de quota, rien n'est stocké sur nos serveurs
Les couleurs aléatoires se rendent utiles partout où une couleur est nécessaire avant que quiconque en ait choisi une. Les designers les utilisent pour briser un blocage créatif et trouver un point de départ que leur palette habituelle n'aurait jamais atteint. Les développeurs remplissent des maquettes, des espaces réservés et des avatars, donnent à chaque série d'un graphique sa propre couleur tant que le vrai thème n'est pas encore décidé, et testent comment une interface gère des arrière-plans pour lesquels elle n'a pas été conçue — un lot de 50 avec le type Toutes les couleurs comprend presque toujours au moins une couleur très sombre ou très claire, et Foncé ou Pastel oriente le test vers l'une de ces extrémités. Les artistes génératifs et les personnes qui prototypent des jeux injectent les valeurs directement dans le code, où la forme RGB s'intègre dans la plupart des bibliothèques graphiques. Les enseignants placent les trois formats côte à côte pour montrer qu'une couleur peut s'écrire comme un code, comme trois canaux ou comme une position sur un cercle chromatique, et pourquoi la version HSL est arrondie. Et quiconque étiquette, marque ou code une liste par couleur obtient des couleurs distinctes sans se casser la tête sur le choix.
Quelques limites honnêtes valent la peine d'être connues. C'est un générateur, pas un outil de palette : il ne construit pas d'harmonies de couleurs et ne garde pas une couleur fixe pendant que les autres changent, et une plage plus étroite donne des couleurs d'un seul type, pas des couleurs choisies pour s'accorder entre elles. Le badge de contraste ne compare que le texte noir et blanc. La page travaille avec les couleurs sRGB qu'un écran affiche — HEX, RGB et HSL —, sans transparence et sans CMYK, Pantone, OKLCH ni couleurs CSS nommées ; pour l'impression, ajustez la couleur dans votre chaîne d'impression plutôt que de faire confiance à un code d'écran. Le même code peut aussi avoir un aspect légèrement différent d'un écran à l'autre, parce que les écrans ne sont pas calibrés de la même façon. Les valeurs HSL sont arrondies, comme décrit plus haut, et à moins que Sans doublons ne soit coché, un lot n'est pas vérifié pour détecter les répétitions. Ce que la page garantit vraiment est plus restreint et exact : chacune de ses 16 777 216 couleurs, ou chaque couleur à l'intérieur de la plage que vous avez définie, a la même chance à chaque clic, tirée de la source cryptographique de votre navigateur et jamais envoyée nulle part.