Générateur de couleur aléatoire
Des couleurs et des codes aléatoires pour le design et le code.
Cliquez sur un code pour le copier. Cliquez sur le cadenas pour garder une couleur à la prochaine génération.
- Codes HEX, RGB ou HSL
- Palettes pastel et sombre
- Verrouillez, retirez le reste
Comment générer des couleurs aléatoires
- Réglez le nombre de couleurs et choisissez un format de code.
- Choisissez une palette aléatoire, pastel ou sombre.
- Cliquez sur un échantillon pour copier son code, ou verrouillez-le avant d'en générer d'autres.
HEX, RGB et HSL comparés
Les trois formats décrivent exactement la même couleur. Celui dont vous avez besoin dépend de l'endroit où vous le collez.
| Format | Ressemble à | Idéal pour |
|---|---|---|
| HEX | #3B82F6 | CSS, outils de design, partage rapide |
| RGB | rgb(59, 130, 246) | CSS, code qui mélange ou fait des dégradés de couleurs |
| HSL | hsl(217, 91%, 60%) | Ajuster une couleur à la main : d'abord la teinte, puis l'intensité, puis la clarté |
HSL est généralement le plus simple à ajuster soi-même, car déplacer le curseur de luminosité plus clair ou plus sombre garde la même teinte, ce que HEX et RGB rendent plus difficile à l'œil.
Aléatoire, pastel et sombre, en chiffres
Chaque mode choisit dans une portion différente du cercle chromatique plutôt que de simplement changer la teinte.
| Mode | Plage de saturation | Plage de luminosité |
|---|---|---|
| Aléatoire | 40 à 100 % | 25 à 75 % |
| Pastel | 35 à 60 % | 75 à 88 % |
| Sombre | 35 à 70 % | 12 à 28 % |
La teinte est toujours choisie sur toute la plage de 0 à 359 dans chaque mode, donc pastel et sombre couvrent aussi toutes les familles de couleurs, juste plus claires ou plus foncées.
À quoi servent les couleurs aléatoires
- Inspiration rapide quand vous êtes bloqué pour choisir une couleur de marque ou de thème.
- Couleurs provisoires pour des wireframes, graphiques et maquettes d'interface avant de choisir une vraie palette.
- Générer des fonds d'avatar, des étiquettes ou des couleurs de catégorie dans une appli.
- Projets artistiques et créatifs, comme une couleur imposée au hasard pour un croquis quotidien.
FAQ Générateur de couleur aléatoire
Quelle est la différence entre les palettes ?
Aléatoire couvre tout le cercle chromatique. Pastel garde la luminosité et la saturation douces pour des fonds légers. Sombre garde les couleurs peu lumineuses pour les thèmes sombres et le texte contrasté.
Comment garder une couleur que j'aime ?
Cliquez sur l'icône de cadenas d'un échantillon. Les échantillons verrouillés gardent leur couleur à la prochaine génération, pour ne retirer que le reste.
Quelle est la différence entre HEX, RGB et HSL ?
HEX et RGB décrivent une couleur par ses quantités de rouge, de vert et de bleu. HSL la décrit par teinte, saturation et luminosité, souvent plus simple à ajuster à la main.
Comment copier un code couleur ?
Cliquez sur le texte du code sous n'importe quel échantillon et il est copié dans votre presse-papiers immédiatement.
Quelles plages utilisent réellement les palettes ?
Aléatoire choisit n'importe quelle teinte avec une saturation de 40 à 100 % et une luminosité de 25 à 75 %. Pastel resserre la luminosité entre 75 et 88 %. Sombre resserre la luminosité entre 12 et 28 %, avec une saturation de 35 à 70 % pour garder des couleurs riches plutôt que ternes.
Deux couleurs aléatoires vont-elles bien ensemble ?
Parfois. Cet outil choisit les couleurs indépendamment pour la variété et l'inspiration, il ne construit pas une palette assortie. Pour des couleurs garanties d'aller ensemble, générez-en plusieurs, verrouillez celles que vous aimez, et retirez le reste jusqu'à ce que l'ensemble vous convienne.
Puis-je générer une seule couleur au lieu d'un ensemble ?
Oui, réglez le nombre sur 1 et cliquez sur Générer pour une seule couleur aléatoire dans le format choisi.
Où puis-je utiliser un code HEX ou RGB une fois obtenu ?
Collez un code HEX directement dans CSS, Figma, Photoshop ou presque tout outil de design. Les valeurs RGB et HSL fonctionnent de la même façon dans des fonctions CSS comme rgb() et hsl().