Softonic

Mélangeur de couleurs

Étape 1 / 2
Résultats

Saisissez deux couleurs HEX, choisissez le nombre d’étapes et le mélangeur affiche la couleur de départ, la couleur d’arrivée et les couleurs réparties régulièrement entre les deux. C’est pratique pour des rampes rapides d’interface, préparer des dégradés, ajuster des états d’icônes et vérifier les codes HEX exacts avant de les utiliser dans du CSS ou un fichier de design.

Comment le mélange HEX est calculé

  1. 1

    Saisissez deux couleurs HEX

    Utilisez un HEX à 3 ou 6 chiffres, avec ou sans #. Exemples : #FF6B35, #1E3A8A, F60.

  2. 2

    Choisissez 2-20 étapes

    Le premier échantillon est la première couleur et le dernier est la seconde ; les échantillons du milieu sont calculés entre les deux.

  3. 3

    Interpolation des canaux RGB

    L’outil convertit le HEX en canaux rouge, vert et bleu, interpole chaque canal linéairement, puis arrondit à l’entier le plus proche.

  4. 4

    Lisez les étapes HEX

    Chaque échantillon est affiché avec un code HEX majuscule à 6 chiffres que vous pouvez sélectionner et réutiliser dans votre design ou votre feuille de style.

Ce que fait cet outil

Le mélangeur fonctionne uniquement avec la notation de couleur HEX standard. Il accepte le HEX court comme #F60 et le HEX complet comme #FF6B35, normalise les valeurs en interne et affiche chaque résultat sous forme de code HEX majuscule à 6 chiffres.

Le mélange est une interpolation linéaire simple dans les canaux RGB/sRGB :

  1. Convertir chaque couleur HEX en valeurs R, G et B de 0 à 255.
  2. Pour chaque étape, calculer t de 0 à 1.
  3. Pour chaque canal, utiliser départ + (arrivée - départ) * t.
  4. Arrondir chaque canal à l’entier le plus proche et reconvertir le résultat en HEX.

Comme les extrémités sont incluses, 2 étapes signifie “départ et arrivée seulement”. Avec 7 étapes de #FF6B35 à #1E3A8A, le résultat est :

Étape Position HEX
1 0 % #FF6B35
2 16,67 % #DA6343
3 33,33 % #B45B51
4 50 % #8F5360
5 66,67 % #694A6E
6 83,33 % #44427C
7 100 % #1E3A8A

Bons cas d’usage

  • Rampes d’état d’interface : créez quelques couleurs intermédiaires pour hover, actif, sélectionné ou désactivé.
  • Préparation de dégradés : décidez des arrêts HEX exacts avant d’écrire un dégradé CSS dans un autre outil.
  • Variantes d’icônes et d’illustrations : gardez un petit ensemble de couleurs liées cohérent.
  • Contrôle design : comparez le point médian calculé par canal au lieu de l’estimer visuellement.

Limites à garder en tête

Ce mélangeur n’accepte pas rgb(), hsl(), les noms de couleur, les valeurs alpha ni le HEX à 8 chiffres. Il n’exporte pas RGB, HSL, LAB, LCH, extraits CSS, contrôles de contraste ou notes d’accessibilité. Pour ces besoins, utilisez un convertisseur, un vérificateur de contraste ou un générateur de dégradés après avoir obtenu les étapes HEX.

Questions fréquentes

HEX uniquement : 3 ou 6 chiffres, avec ou sans # au début. L’outil ne lit pas rgb(), hsl(), les canaux alpha ni les noms de couleur.

Oui. La première étape est la première couleur et la dernière étape est la seconde. Les autres étapes sont les couleurs interpolées entre les deux.

Le mélange est calculé canal par canal en RGB/sRGB. C’est prévisible et facile à réutiliser dans le code, mais ce n’est pas une interpolation perceptuelle LAB ou LCH.

Non. Il affiche uniquement des échantillons et des codes HEX. Utilisez ces valeurs dans votre CSS ou passez-les dans un vérificateur de contraste si les ratios d’accessibilité sont importants.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur de lettres aléatoires

Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Générateur de palettes de couleurs aléatoires

Générez des palettes aléatoires de 2 à 15 couleurs, choisissez un style vif, pastel, sourd ou sombre, puis copiez les codes HEX ou les variables CSS.