Atelier de couleurs et générateur de palette

Choisissez une couleur à la main ou prélevez-la dans une image, construisez la palette, puis exportez-la en CSS, en JSON ou en objet de thème. Tout se calcule dans votre navigateur.

Atelier de couleurs

Couleur active

Saturation 91 pour cent, luminosité 98 pour cent, couleur #fa7516. Flèches pour ajuster, Maj et flèches pour un pas de dix.

Teinte

#fa7516Opaque · Contraste sur blanc 2.76 : 1

Valeurs

Hexadécimal

RGB

HSL

Opacité

L’opacité s’applique à la valeur copiée en rgba, pas aux exports de palette : une variable de thème gagne à rester opaque et à être rendue transparente à l’usage.

rgba(250, 117, 22, 1.00)

Historique

Les douze dernières couleurs retenues apparaîtront ici, le temps de la session.

4 couleurs

Glissez une colonne pour la déplacer, ou utilisez les flèches de sa barre d’outils. Une couleur verrouillée ne peut plus être supprimée.

4 couleurs prêtes à exporter.

Vérifier un contraste Créer un dégradé

Variables CSS

:root {
  --accent-principal: #f97316;
  --encre-profonde: #14181f;
  --blanc-chaud: #f5f1e9;
  --texte-courant: #101828;
}

JSON

{
  "palette": [
    {
      "nom": "Accent principal",
      "variable": "accent-principal",
      "hex": "#f97316",
      "rgb": [
        249,
        115,
        22
      ],
      "hsl": [
        25,
        95,
        53
      ]
    },
    {
      "nom": "Encre profonde",
      "variable": "encre-profonde",
      "hex": "#14181f",
      "rgb": [
        20,
        24,
        31
      ],
      "hsl": [
        218,
        22,
        10
      ]
    },
    {
      "nom": "Blanc chaud",
      "variable": "blanc-chaud",
      "hex": "#f5f1e9",
      "rgb": [
        245,
        241,
        233
      ],
      "hsl": [
        40,
        38,
        94
      ]
    },
    {
      "nom": "Texte courant",
      "variable": "texte-courant",
      "hex": "#101828",
      "rgb": [
        16,
        24,
        40
      ],
      "hsl": [
        220,
        43,
        11
      ]
    }
  ]
}

À quoi servent ces chiffres ?

Conversion HEX / RGB / HSLTrois représentations équivalentes d’une même couleur, converties sans perte.
NuancesNeuf paliers de luminosité générés à teinte et saturation constantes.
Couleurs dominantesRegroupement des pixels d’une image par proximité de teinte, méthode par quantification.
Export CSSVariables prêtes à coller dans une feuille de style, un nom par couleur ajoutée à la palette.

Voir les formules

Outils associés

Tous les outils gratuits

Bon à savoir

Les résultats se recalculent à chaque frappe. Vous pouvez charger un exemple pour comprendre le fonctionnement, puis remplacer les valeurs par les vôtres.

Formules et hypothèses

Rien n’est caché : voici les calculs.

Chaque indicateur affiché plus haut correspond exactement à l’une de ces formules. Tous les montants sont exprimés hors taxes.

Conversion HEX / RGB / HSL

Trois représentations équivalentes d’une même couleur, converties sans perte.

RGB ↔ HSLvia la formule standard

Nuances

Neuf paliers de luminosité générés à teinte et saturation constantes.

Luminosité de 95à 10, teinte fixe

Couleurs dominantes

Regroupement des pixels d’une image par proximité de teinte, méthode par quantification.

Chaque canal arrondiau multiple de 24 le plus proche

Export CSS

Variables prêtes à coller dans une feuille de style, un nom par couleur ajoutée à la palette.

:root { --nom:#couleur; }

Une extraction par quantification, pas une intelligence artificielle

Les couleurs dominantes d’une image sont obtenues par une méthode de quantification : chaque pixel est arrondi au groupe de teintes proches le plus proche, puis ces groupes sont classés par nombre de pixels. C’est une méthode simple, reproductible et rapide, documentée ici sans détour, mais ce n’est pas un clustering perceptuel intelligent : deux teintes très proches à la frontière de deux groupes peuvent rester séparées plutôt que fusionnées.

Nuances et palette de marque : deux usages différents

Les neuf nuances générées à partir d’une couleur de base, à teinte et saturation constantes, conviennent bien à des états d’interface : un bouton au repos, survolé, désactivé. Une palette de marque aboutie demande en revanche un travail éditorial plus large, qui dépasse ce que peut produire un calcul automatique, notamment sur l’harmonie entre plusieurs teintes distinctes plutôt qu’une seule déclinée.

Du choix de couleur à la vérification de lisibilité

Choisir une couleur ne garantit pas qu’elle reste lisible une fois posée sur un fond réel. Les boutons de passerelle vers le vérificateur de contraste transmettent la couleur choisie pour l’instant de votre session de navigation seulement, sans compte ni serveur, afin que la question de la lisibilité se pose au même moment que celle du choix esthétique, pas après coup.

Questions fréquentes

Ce que l’on nous demande le plus souvent.

Non. L’image est redimensionnée puis lue directement sur un canevas de votre navigateur ; aucun fichier n’est transmis à Web-Shine. La réduction de taille avant lecture accélère simplement le calcul, sans changer les couleurs identifiées.

La méthode de quantification regroupe les teintes proches par tranches plutôt que de retenir chaque valeur exacte de pixel. Une couleur de logo très légèrement différente de sa tranche voisine peut donc apparaître arrondie plutôt qu’au pixel près.

Non. La palette construite existe uniquement dans la mémoire de votre navigateur pour la durée de la session en cours, sans compte ni serveur. Fermer l’onglet ou actualiser la page efface la palette, exportez-la en CSS avant de partir si vous voulez la conserver.

Il transmet la couleur affichée au vérificateur de contraste au moment du clic, via la mémoire de votre navigateur pour l’onglet en cours seulement, puis vous y redirige. Aucune donnée ne quitte votre appareil ni ne persiste au-delà de cette session.

Non, cette version fixe volontairement le nombre de nuances à neuf, un compromis lisible entre finesse des paliers et largeur de la bande affichée. Cliquer sur une nuance la reprend comme nouvelle couleur de base pour explorer plus loin autour d’elle.

Outils associés