Générateur de palette de couleurs

Générez une palette de couleurs de cinq façons différentes

Ce générateur de palette de couleurs remplace tout un ensemble d'outils séparés. Appuyez sur Générer pour une palette aléatoire, configurez une harmonie de couleurs à partir d'une couleur de base, extrayez des couleurs d'une image ou photo, développez un seul code hex en un schéma complet, ou transformez un nom de couleur ou un mot en une palette reproductible. Définissez entre 3 et 10 couleurs, verrouillez celles que vous aimez et régénérez les autres — sans compte et rien ne quitte votre navigateur.

Cliquez sur n'importe quel échantillon pour copier sa valeur, basculez entre HEX, RGB et HSL, et faites glisser les échantillons pour les réorganiser. Appuyez sur Espace pour générer une nouvelle palette instantanément — le même flux que Coolors a popularisé, disponible ici sans paywall.

Extrayez des couleurs depuis une image, un code hex ou un nom

Depuis une image : Déposez une photo et l'outil l'analyse sur un canvas HTML5 caché en utilisant un algorithme de coupe médiane pour extraire les couleurs dominantes — utile pour harmoniser une palette avec une photo produit, une image de marque ou un moodboard. L'image reste sur votre appareil et n'est jamais envoyée à un serveur. Coolors facture cette fonctionnalité aux abonnés Pro ; ici c'est gratuit.

Depuis un code hex : Collez une couleur de marque et gardez-la comme ancre pendant que le générateur crée des couleurs analogues, complémentaires et des nuances autour d'elle. Depuis un nom : Tapez n'importe quel mot et un hash déterministe génère la palette, donc le même nom produit toujours les mêmes couleurs — une alternative hors ligne fiable aux générateurs de palettes basés sur l'IA qui donnent des résultats différents à chaque exécution.

Harmonies de couleurs fondées sur la vraie théorie des couleurs

Le mode Harmonie applique la théorie des couleurs en faisant pivoter la teinte autour de la roue chromatique. Les couleurs complémentaires sont à 180° pour un contraste fort ; les couleurs analogues restent dans ±30° pour un rendu calme et unifié ; le triadique utilise trois teintes à 120° ; le tétradique utilise quatre à 90° ; le split-complémentaire adoucit le contraste à 150°/210° ; et le monochromatique conserve une teinte et varie la luminosité dans la palette.

Chaque couleur générée est également accompagnée d'une échelle complète de teintes et ombres de 50 à 900 — les niveaux plus clairs et plus sombres nécessaires pour les états hover, les couleurs de bordure et les variantes de fond dans un système de design d'interface réel.

Comment UtiloKit se compare à Coolors, Adobe Color et Paletton

Coolors est l'outil de palette le plus populaire, avec un excellent flux de verrouillage/régénération et une grande communauté. Coolors Pro (4 $/mois) place l'extraction d'images, l'export avancé et l'historique des palettes derrière un paywall. L'export natif vers Tailwind n'est pas inclus dans le plan gratuit. Adobe Color réalise bien les vérifications d'accessibilité WCAG et la visualisation des harmonies, mais la sauvegarde des palettes nécessite un compte Adobe gratuit et demande plus de clics pour atteindre l'export.

Paletton est solide pour la théorie des couleurs mais ne propose que quatre types d'harmonie et n'inclut pas l'extraction d'images. UtiloKit combine les points forts des trois — le verrouillage style Coolors, le panneau WCAG d'Adobe Color, l'extraction d'images et l'export vers Tailwind/SCSS — sans compte, sans paywall et sans publicité dans l'outil.

Verrouillez vos favoris et continuez d'itérer

Les bonnes palettes viennent de l'itération, pas d'une seule génération. Verrouillez un échantillon et il reste en place. Tout ce qui est déverrouillé est régénéré quand vous appuyez sur Générer ou sur la Barre d'espace. Gardez la couleur dominante qui vous plaît, mélangez les accents et affinez jusqu'à trouver un ensemble qui fonctionne — puis passez directement à l'export.

Vous pouvez verrouiller plusieurs couleurs à la fois. Verrouillez la couleur principale de votre marque et un fond neutre, puis laissez l'outil suggérer des accents. Verrouillez ces accents lorsque vous en trouvez qui fonctionnent et régénérez les tons de soutien. Cela imite la façon dont les designers créent des palettes manuellement, mais beaucoup plus rapidement.

Exportez en CSS, Tailwind, SCSS, JSON, PNG et lien partageable

Quand la palette est prête, exportez dans le format qu'il faut pour votre projet. CSS génère un bloc :root de propriétés personnalisées. Tailwind génère un objet theme.extend.colors prêt à coller dans tailwind.config.js. SCSS génère des déclarations de $variables compatibles Sass. JSON liste chaque couleur en HEX, RGB et HSL pour JavaScript ou des pipelines de tokens de design. Téléchargez une feuille d'échantillons en PNG pour un document de marque ou une présentation. Copiez un lien partageable qui encode la palette dans l'URL pour qu'un collaborateur ouvre exactement ce que vous voyez.

Vérification de contraste WCAG intégrée

Une palette n'est pas terminée jusqu'à ce que le texte dessus soit lisible. Le panneau de contraste affiche le ratio de contraste WCAG de chaque couleur par rapport au texte blanc et noir, avec des badges AA et AAA. WCAG 2.1 AA exige 4,5:1 pour le texte normal et 3:1 pour le texte grand. AAA exige 7:1 pour le texte normal. La plupart des outils de palette sautent cette étape ou la placent derrière un niveau premium — ici c'est intégré et fonctionne en temps réel pendant que vous générez ou modifiez des échantillons.

Sans inscription, sans envoi de fichier, rien ne quitte votre navigateur. Chaque opération de palette — génération aléatoire, extraction d'images, calcul des harmonies, vérification du contraste et export — s'exécute en JavaScript local. Mettez en favoris ce générateur de palette de couleurs gratuit pour le design web, l'identité de marque, l'illustration, les présentations et les palettes de saison ou de mariage.