Générateur de palettes de couleurs

Mode d’emploi

1. Une palette et une échelle de luminosité sont déjà à l’écran à l’ouverture de la page, construites à partir de la base par défaut #4F46E5 — le premier résultat ne demande aucun clic.
2. Faites-en votre couleur : collez #4F46E5, rgb(79, 70, 229), hsl(243, 75%, 59%) ou un nom de couleur CSS anglais, utilisez le sélecteur système, ou appuyez sur « Base aléatoire ». Tout se recalcule à la frappe.
3. Choisissez la relation entre les teintes. Analogue (0°, ±30°, ±60°) reste dans le voisinage ; Complémentaire (0°, 180°) est l’opposé direct ; Triadique (0°, 120°, 240°) et Tétradique (0°, 90°, 180°, 270°) élargissent l’écart ; Divisée-complémentaire (0°, 150°, 210°) garde la tension sans le heurt. L’échelle est toujours la couleur de base aux luminosités 88 / 70 / 52 / 34 / 18 %, « la version plus claire/plus sombre de ma couleur principale » est donc à un clic.
4. Touchez un échantillon pour copier sa valeur dans le format choisi ; « Copier le CSS » donne l’ensemble en propriétés personnalisées :root, « Copier les valeurs » donne une valeur par ligne.

Portée, limites et questions courantes

• Cinq règles, pas d’angles personnalisés ni de cercle chromatique : si vous avez besoin d’une teinte exacte, réglez la couleur de base ou utilisez le convertisseur de couleurs.
• L’échelle utilise des paliers de luminosité fixes (88 / 70 / 52 / 34 / 18 %) plutôt que « 25 % plus proche du blanc/noir à partir de votre couleur ». Cela rend l’échelle comparable entre différentes bases, mais une base déjà très claire ou très sombre aura des paliers qui en diffèrent à peine.
• Une base grise, blanche ou noire donne une palette entièrement identique : la rotation de teinte sur une couleur totalement désaturée ne change rien. C’est l’arithmétique honnête, pas un bogue.
• Couleurs opaques uniquement : pas d’alpha, pas de rgba(), pas de HEX à 8 chiffres. La transparence relève du convertisseur de couleurs.
• Valeurs d’écran sRGB uniquement : pas de CMYK, pas de Lab, pas de gestion de couleur — le même HEX rend différemment sur des écrans non calibrés, et cet outil ne prétend pas le contraire.
• Le contraste ne sert qu’à décider si la valeur imprimée sur un échantillon est noire ou blanche. Aucun ratio de contraste n’est indiqué ; pour vérifier l’accessibilité, utilisez le convertisseur de couleurs.
• La géométrie garantit les relations de teinte, pas l’esthétique : une paire complémentaire très saturée peut rester criarde. C’est ce que signifie la règle.
• « Base aléatoire » tire depuis crypto.getRandomValues du navigateur — cryptographiquement fort, pas un service d’entropie physique — et est désactivé quand le navigateur n’offre pas cette source. Tout le reste continue de fonctionner.
• Rien n’est envoyé, stocké ni placé dans l’URL : recharger revient à #4F46E5 + Analogue + HEX, et le bouton de partage ne partage que le lien de la page. Exportez votre palette avec « Copier le CSS ».
• Les noms de couleur CSS anglais sont acceptés en entrée car c’est la syntaxe CSS ; il n’y a pas de sortie de noms de couleur localisés — la même couleur n’a pas de nom standard français ou chinois à imprimer.
• L’arrondi est au niveau de l’affichage : les composantes sont des entiers, convertir la même couleur entre HEX et HSL peut donc décaler une composante de 1.