Aller au contenu principal
Bethemesh
Images & graphisme

Générateur de palette de couleurs

Choisissez une couleur de base et une harmonie : la palette s’affiche en pastilles HEX et HSL à copier, avec ses variables CSS.

  • Presse-papiers

Intégrer ce widget

Personnalisez le rendu, vérifiez l’aperçu puis copiez le code.

Aperçu

Type de code d’intégration

Code à copier

Responsive et redimensionné automatiquement par Bethemesh.

Couleur de base

Code HEX, rgb() ou hsl() ; la transparence est ignorée.

Palette

    Variables CSS

    Cet outil vous a-t-il été utile ?

    Comment fonctionne cet outil ?

    Une palette harmonieuse repose sur des couleurs placées à des angles précis du cercle chromatique : opposées pour un contraste fort, voisines pour une ambiance douce, réparties en triangle pour un ensemble équilibré. Ce générateur part d’une couleur de base, la vôtre ou celle d’une marque, et calcule six harmonies classiques prêtes à copier en HEX, en HSL ou en variables CSS.

    Saisissez la couleur de base en HEX, rgb() ou hsl(), ou choisissez-la dans le sélecteur. Elle est convertie en teinte, saturation et luminosité (HSL) ; une éventuelle transparence est ignorée.

    Pour les harmonies de teinte, la saturation et la luminosité restent celles de la base et seule la teinte tourne : Complémentaire ajoute la couleur à 180°, Analogue les voisines à −30° et +30°, Triadique les couleurs à 120° et 240°, Complémentaire adjacente celles à 150° et 210°, Tétradique (carré) celles à 90°, 180° et 270°. Monochrome garde la teinte et la saturation et décline cinq luminosités, de −30 à +30 points, limitées entre 5 et 95 %.

    Chaque pastille affiche son code HEX et sa valeur HSL, avec un texte noir ou blanc choisi selon la luminance pour rester lisible. Un clic copie le code HEX ; le bloc Variables CSS reprend toute la palette sous la forme --color-1, --color-2…

    Comment utiliser cet outil ?

    1. Choisissez la couleur de base

      Tapez un code comme #3366FF ou utilisez le sélecteur de couleur.

    2. Sélectionnez l’harmonie

      Complémentaire, analogue, triadique, complémentaire adjacente, tétradique ou monochrome : la palette se met à jour aussitôt.

    3. Copiez les couleurs

      Cliquez sur une pastille pour copier son code HEX, ou copiez le bloc de variables CSS.

    Calcul des harmonies

    La couleur de base est convertie en HSL ; les harmonies déplacent la teinte d’un angle fixe ou décalent la luminosité.

    Rotation de teinte

    H_k = (H + δ_k) mod 360

    δ vaut 180° (complémentaire), ±30° (analogue), 120° et 240° (triadique), 150° et 210° (complémentaire adjacente), 90°, 180° et 270° (tétradique).

    Luminosités monochromes

    L_k = min(95, max(5, L + λ_k))

    λ vaut −30, −15, 0, +15 et +30 points de pourcentage.

    H, L
    teinte (en degrés) et luminosité (en %) de la couleur de base
    δ_k
    décalage de teinte de la k-ième couleur
    λ_k
    décalage de luminosité de la k-ième couleur monochrome

    Cas d'utilisation

    Décliner une couleur de marque

    Trouvez une couleur d’accent complémentaire ou des teintes voisines autour du bleu d’un logo.

    Créer des nuances d’interface

    Générez cinq luminosités d’une même teinte pour les fonds, bordures et états survolés.

    Colorer un graphique

    Obtenez trois ou quatre couleurs bien distinctes pour les séries d’un graphique ou d’une carte.

    Exemples

    Harmonie complémentaire et triadique d’un bleu

    225 + 180 = 405, soit 45° : un jaune doré. En triadique, 225 + 120 = 345° (rose framboise) et 225 + 240 = 465, soit 105° (vert). Saturation et luminosité restent à 100 % et 60 %.

    Entrée

    Couleur de base #3366FF (hsl(225, 100%, 60%)), harmonies Complémentaire puis Triadique

    Résultat

    Complémentaire : #3366FF et #FFCC33 ; triadique : #3366FF, #FF3366 et #66FF33

    Palette monochrome du même bleu

    La luminosité de 60 % devient 30, 45, 60, 75 et 90 % : deux nuances sombres pour le texte ou les boutons, deux claires pour les fonds.

    Entrée

    Couleur de base #3366FF, harmonie Monochrome

    Résultat

    #002699, #0039E6, #3366FF, #809FFF, #CCD9FF

    Conseils et bonnes pratiques

    • Une palette complémentaire très saturée vibre fort : réservez la seconde couleur aux accents (boutons, liens) plutôt qu’aux grands aplats.
    • Partez d’une couleur peu saturée pour obtenir une palette plus sobre : toutes les couleurs de teinte héritent de sa saturation.
    • Vérifiez le contraste du texte sur chaque couleur avant de l’utiliser pour du contenu, et testez la palette avec le simulateur de daltonisme.
    • Les harmonies sont calculées sur le cercle HSL : deux couleurs de même luminosité HSL peuvent paraître plus ou moins claires à l’œil (un jaune semble plus lumineux qu’un bleu).

    Sources et références

    Questions fréquentes

    Combien de couleurs contient chaque palette ?

    Deux en complémentaire, trois en analogue, triadique et complémentaire adjacente, quatre en tétradique et cinq en monochrome. La couleur de base est toujours incluse.

    Quelle harmonie choisir ?

    Complémentaire pour un contraste marqué, analogue pour une ambiance homogène, triadique ou tétradique pour plusieurs couleurs distinctes, monochrome pour une interface sobre.

    Pourquoi les couleurs ont-elles toutes la même saturation ?

    Les harmonies de teinte ne font tourner que la teinte ; saturation et luminosité sont reprises de la couleur de base, ce qui garde un ensemble cohérent.

    Les codes copiés sont-ils exacts ?

    Oui. Chaque couleur est calculée en HSL puis convertie en HEX avec des canaux arrondis à l’entier, au format accepté par tous les navigateurs.

    Comment utiliser les variables CSS ?

    Collez le bloc :root dans votre feuille de style, puis utilisez var(--color-1), var(--color-2)… dans vos règles.

    Ma couleur est-elle enregistrée ou envoyée ?

    Non. La palette est calculée dans votre navigateur et rien n’est conservé après la fermeture de la page.

    Outils associés

    Continuez avec ces outils

    Des outils similaires ou complémentaires à celui-ci.

    Outils similaires

    Convertisseur de couleurs

    Convertissez une couleur entre HEX, RGB et HSL avec ses valeurs équivalentes.

    Images & graphismeUtiliser l’outil

    Simulateur de daltonisme

    Visualisez une image comme elle peut être perçue avec différents types de daltonisme.

    Images & graphismeUtiliser l’outil

    À lire aussi

    TutorielBonnes pratiquesDébutant

    Optimiser ses images pour le Web sans perdre en qualité

    Redimensionnement, compression, WebP, AVIF, métadonnées et traitement par lot : une méthode complète pour alléger les images d’un site sans dégrader inutilement leur rendu.

    30 août 20265 min