Color Blender — Mélanger couleurs et créer palettes

Qu'est-ce que Color Blender ?

Color Blender est un outil en ligne gratuit qui mélange deux couleurs et génère une série douce de teintes intermédiaires. Choisissez une couleur de départ et une couleur d'arrivée, définissez le nombre d'étapes souhaité (de 1 à 30), et l'outil affiche instantanément une palette de transition complète. Il résout le problème courant de calcul manuel des stops intermédiaires pour les dégradés, les échelles de visualisation de données ou les palettes de marque, sans avoir recours à Figma, Illustrator ou un logiciel installé. Tous les calculs s'effectuent dans votre navigateur sans aucune donnée envoyée à un serveur.

Fonctionnalités principales

• Mélanger deux couleurs — accepte des valeurs hex via le champ texte ou le sélecteur de couleur natif ; les deux entrées se synchronisent.
• Étapes ajustables de 1 à 30 — un curseur contrôle le nombre de couleurs dans la palette, y compris les deux extrémités. À 2 étapes vous obtenez uniquement la paire d'origine ; à 30 vous obtenez une transition finement graduée.
• Aperçu de palette en temps réel — une barre de dégradé en direct et une grille d'échantillons cliquables se mettent à jour dès que vous déplacez le curseur ou modifiez une couleur.
• Copier les couleurs individuellement ou toutes à la fois — cliquer sur un échantillon copie sa valeur hex dans le presse-papiers. Le bouton « Tout copier » copie en une fois la liste complète des codes hex séparés par des virgules.
• Sortie HEX avec utilitaires RGB et HSL — chaque étiquette d'échantillon affiche la valeur hex ; le code source utilise hexToRgb, rgbToHex et generateBlendedPalette de la bibliothèque partagée color-utils.
• Sélecteur de couleur visuel pour les entrées — un <input type="color"> natif est placé à côté de chaque champ texte pour sélectionner les couleurs visuellement ou saisir des valeurs directement.
• Exporter la palette en JSON — télécharge un fichier color-blend-palette.json contenant color1, color2, steps et le tableau complet palette.
• Exporter en variables CSS (Premium) — le PremiumExportButton génère un fichier color-blend-palette.css avec des propriétés personnalisées nommées.

Comment utiliser Color Blender

Étape 1 : Définir les deux couleurs de base

Ouvrez l'outil Bientôt disponible: Color Blender. Vous verrez deux entrées de couleur côte à côte, intitulées « Couleur 1 » et « Couleur 2 ». Chaque entrée dispose d'un sélecteur de couleur (le carré à gauche) et d'un champ texte hex.

Cliquez sur le sélecteur de couleur pour la Couleur 1 pour ouvrir le sélecteur de couleurs natif de votre navigateur, ou tapez directement une valeur hex — par exemple #E63946 pour un rouge vif. Faites de même pour la Couleur 2 : essayez #457B9D pour un bleu acier. Un rectangle de prévisualisation sous chaque entrée affiche la couleur sélectionnée avec son code hex superposé dans une couleur de texte contrastante (l'outil détecte automatiquement s'il faut utiliser du texte noir ou blanc pour la lisibilité).

Utilisez le bouton Intervertir les couleurs pour inverser instantanément les deux entrées, ou cliquez sur Aléatoire pour choisir deux nouvelles couleurs au hasard.

Étape 2 : Ajuster le nombre d'étapes de transition

Sous les entrées de couleur se trouve un curseur « Étapes de transition ». Faites-le glisser vers la gauche vers 1 pour une transition minimale, ou vers la droite jusqu'à 30 pour une palette très détaillée. L'étiquette affiche le nombre d'étapes actuel et une ligne sous le curseur indique le nombre total de couleurs qui apparaîtront dans la palette.

Pour un dégradé d'interface standard, 5 à 7 étapes conviennent bien. Pour une échelle de couleurs de visualisation de données, 10 à 12 étapes offrent suffisamment de variation pour distinguer clairement les catégories.

Étape 3 : Examiner la palette mélangée

La carte « Palette mélangée » apparaît sous le curseur. En haut se trouve une barre de dégradé continue montrant comment les couleurs se transforment de gauche à droite. En dessous, une grille d'échantillons carrés de 64×64 pixels affiche chaque étape.

Passez la souris sur un échantillon pour voir sa valeur hex dans une petite superposition. Cliquez sur l'échantillon pour copier la valeur dans le presse-papiers. Une notification toast confirme la copie.

Sous les échantillons, une vue en liste affiche le code hex de chaque couleur avec un petit carré de prévisualisation et un bouton de copie individuel.

Étape 4 : Exporter votre palette

Utilisez l'une des trois options d'exportation :

• Tout copier — copie la palette complète sous forme de chaîne séparée par des virgules (par ex. #E63946, #C25167, #9F6388, ...) prête à coller n'importe où.
• Exporter JSON — télécharge color-blend-palette.json avec la structure : { "color1": "#E63946", "color2": "#457B9D", "steps": 7, "palette": [...] }.
• CSS (Premium) — télécharge color-blend-palette.css avec des propriétés personnalisées CSS nommées --blend-0 à --blend-N.

Exemples pratiques

Dégradé de marque pour un en-tête de site web

Un designer créant une page d'accueil pour une startup a besoin d'un dégradé depuis la couleur principale de la marque #6C3FF5 (violet) vers un accent secondaire #00C2CB (sarcelle). Avec 8 étapes, on obtient : #6C3FF5, #5C53F2, #4C66EF, #3C7AEC, #2C8DE9, #1CA0E6, #0CB4E3, #00C2CB. Cet ensemble intermédiaire correspond directement aux stops d'un dégradé CSS avec espacement uniforme, garantissant l'absence de sauts brusques.

Échelle de couleurs pour la visualisation de données

Un développeur créant une carte choroplèthe a besoin d'une échelle de blanc #FFFFFF à vert foncé #1A6B3A pour représenter la densité de population. Avec 10 étapes, la palette fournit dix nuances perceptuellement distinctes. Le JSON exporté peut être importé directement dans une configuration D3.js ou Chart.js comme tableau de couleurs de domaine.

Vérification du contraste pour l'accessibilité

Une équipe UI utilise Color Blender pour trouver quelles teintes intermédiaires entre deux couleurs de marque maintiennent un contraste WCAG AA avec du texte blanc. Elle mélange #003566 (bleu marine) à #FFC300 (ambre) en 12 étapes, puis colle chaque hex dans le Contrast Checker pour identifier la plage de valeurs sûres.

Conseils et bonnes pratiques

Utilisez le bouton aléatoire pour vous inspirer. Quand vous êtes bloqué sur une direction de palette, cliquer sur Aléatoire génère deux couleurs hex totalement aléatoires. Le résultat mélangé révèle souvent des combinaisons inattendues qui valent la peine d'être conservées.

Le bouton d'échange aide à vérifier la directionnalité. Comme le dégradé va de gauche à droite de la Couleur 1 à la Couleur 2, l'échange vous permet de voir rapidement si la transition est plus belle dans la direction opposée.

Enregistrez vos combinaisons favorites comme presets. Le PresetsPanel (disponible pour les supporters) stocke ensemble les valeurs color1, color2 et steps afin que vous puissiez rappeler une configuration exacte de palette sans ressaisir les valeurs.

Restaurez les mélanges précédents depuis l'Historique. Le HistoryPanel enregistre chaque action « Tout copier ». Lorsque vous restaurez une entrée de l'historique, l'outil réanalyse la liste hex copiée, définit la Couleur 1 sur la première valeur, la Couleur 2 sur la dernière, et les étapes sur le nombre total.

Commencez avec un nombre d'étapes élevé et réduisez. Si vous ne savez pas combien d'étapes vous avez besoin, commencez à 20 ou plus pour voir la granularité complète, puis réduisez jusqu'à ce que la transition soit encore douce. La plupart des dégradés sont beaux entre 5 et 10 étapes.

Problèmes courants et dépannage

Valeur hex non valide saisie manuellement. Si vous tapez une chaîne non valide dans le champ texte hex (comme #ZZZZZZ), hexToRgb renvoie null et la palette est rendue comme un tableau vide. La zone d'échantillons sera vide. Solution : assurez-vous que le champ hex contient exactement 6 caractères hexadécimaux valides précédés de #.

La palette n'affiche qu'une ou deux couleurs. Cela arrive quand le curseur est à sa valeur minimale de 1 ou 2. Faites-le glisser vers la droite pour ajouter des étapes intermédiaires.

Tout copier ne produit aucune sortie. Si la palette est vide (à cause d'une couleur non valide), la tentative d'écriture dans le presse-papiers se déclenche quand même mais envoie une chaîne vide. Corrigez d'abord les entrées de couleur et confirmez que la barre de dégradé est visible avant de copier.

Le téléchargement de l'export JSON ne se déclenche pas. Certains navigateurs bloquent les clics programmatiques sur des liens dans certains contextes. Si le téléchargement ne démarre pas, vérifiez que les fenêtres contextuelles et les téléchargements sont autorisés pour le site dans les paramètres de votre navigateur.

L'export CSS nécessite Premium. L'export de variables CSS est protégé par le composant PremiumExportButton et nécessite une activation de supporter active. L'export JSON est gratuit et disponible pour tous les utilisateurs.

Confidentialité et sécurité

Color Blender fonctionne entièrement dans votre navigateur. Aucune donnée de couleur, configuration de palette ni fichier exporté n'est transmis à un serveur. L'outil n'utilise que l'API Web Clipboard et les APIs Blob/URL, qui sont toutes des opérations locales du navigateur. Les données de presets et d'historique sont stockées dans la base de données IndexedDB de votre navigateur et ne quittent jamais votre appareil. L'outil fonctionne hors connexion après le chargement initial de la page.

Questions fréquentes

Color Blender est-il gratuit ?

Oui, Color Blender est entièrement gratuit sans compte requis. Les fonctionnalités principales — mélanger des couleurs, ajuster les étapes, copier des valeurs hex et exporter en JSON — sont disponibles pour tous les visiteurs. L'export de variables CSS est une fonctionnalité Premium pour supporters disponible avec un don de 5 $ sur Ko-fi qui accorde 30 jours d'accès.

Color Blender fonctionne-t-il hors connexion ?

Oui. Une fois la page chargée, Color Blender fonctionne sans connexion internet. Tous les calculs de couleurs s'exécutent en JavaScript dans votre navigateur, et aucune requête réseau n'est effectuée lors d'une utilisation normale. Cela le rend utilisable dans des environnements à accès internet restreint.

Mes données sont-elles en sécurité avec Color Blender ?

Complètement en sécurité. Aucune valeur de couleur, donnée de palette ni fichier exporté n'est jamais envoyé à un serveur. Tout le traitement se fait localement dans votre navigateur en utilisant l'API Web Clipboard pour copier et l'API Blob pour les téléchargements de fichiers. Vos choix de couleurs restent entièrement sur votre appareil.

Comment fonctionne l'algorithme de mélange ?

L'outil utilise l'interpolation RGB linéaire. Il convertit les deux couleurs hex en leurs composantes RGB, puis calcule des valeurs intermédiaires régulièrement espacées le long de la ligne droite entre elles dans l'espace colorimétrique RGB. Si les espaces colorimétriques perceptuels comme OKLab peuvent produire des dégradés d'aspect plus uniforme pour certaines paires de couleurs, l'interpolation RGB linéaire est simple en termes de calcul et produit des résultats prévisibles et symétriques.

Le nombre d'étapes inclut-il seulement les intermédiaires ou aussi les extrémités ?

Le nombre d'étapes inclut les deux extrémités. Un paramètre de 5 étapes produit exactement 5 couleurs : la couleur de départ, 3 nuances intermédiaires et la couleur d'arrivée. Un paramètre de 2 donne uniquement les deux couleurs originales sans mélange. Le curseur va de 1 à 30.

Puis-je entrer des couleurs autres que hex ?

Les champs de saisie texte n'acceptent que des valeurs hex. Si vous souhaitez mélanger des couleurs à partir de valeurs RGB ou HSL, utilisez d'abord le Color Converter pour obtenir l'équivalent hex, puis collez-le dans Color Blender.

Quel est le format du JSON exporté ?

Le fichier JSON comporte quatre clés : color1 (hex de départ), color2 (hex d'arrivée), steps (la valeur du curseur) et palette (un tableau de chaînes hex du début à la fin). Pour un mélange de 5 étapes de #E63946 à #457B9D, le tableau de palette contient exactement 5 valeurs hex.

Puis-je mélanger plus de deux couleurs ?

Color Blender prend en charge exactement deux couleurs d'entrée. Pour créer un dégradé à plusieurs points d'ancrage, mélangez chaque paire de couleurs adjacentes séparément et combinez les palettes obtenues. Le Bientôt disponible: Gradient Generator prend en charge nativement plusieurs stops de couleur.

Comment utiliser la palette en CSS ?

Pour l'export JSON, itérez le tableau palette et assignez chaque valeur à un stop de dégradé ou à une propriété personnalisée CSS. Pour l'export CSS (Premium), le fichier téléchargé contient des variables nommées --blend-0 à --blend-N que vous pouvez importer dans n'importe quelle feuille de style.

La palette inclut-elle les couleurs d'origine ?

Oui. La première couleur du tableau de palette est toujours la Couleur 1 et la dernière est toujours la Couleur 2. Toutes les valeurs entre elles sont des interpolations calculées.

Outils connexes

• Bientôt disponible: Color Mixer — mélangez deux couleurs avec un seul curseur de ratio pour un mélange rapide sans générer de palette complète.
• Bientôt disponible: Gradient Generator — créez des dégradés CSS à plusieurs stops avec des contrôles précis d'angle et de position.
• Color Picker — sélectionnez des couleurs n'importe où sur votre écran ou depuis une image téléchargée.
• Color Converter — convertissez entre HEX, RGB, HSL, HSB et CMYK avant de mélanger.

Essayez Color Blender maintenant : Bientôt disponible: Glyph Widgets Color Blender