Utiliser Paletton pour vous aider à choisir la palette de couleurs de votre site WordPress

Publié: 2020-07-31

Dans cet article, nous verrons comment utiliser Paletton pour choisir la palette de couleurs de votre site WordPress. Paletton est un générateur de palette de couleurs en ligne facile à utiliser qui vous fera gagner beaucoup de temps. Tous les clients de conception de sites Web n'auront pas un schéma de couleurs de marque et il vous incombera de choisir les couleurs de leur site Web. C'est là que Paletton est utile.

Parmi toutes les options disponibles en ligne, Paletton est l'un des favoris en raison de la fonction d'exemple en direct. L'application n'a pas été mise à jour depuis quelques années, mais heureusement, elle fonctionne toujours parfaitement pour ce dont vous avez besoin. Vous trouverez l'application sur Paletton.com. Ignorez les annonces Google tout autour et vous êtes prêt à partir.

Pourquoi est-il important de choisir les bonnes couleurs pour votre site Web

Avant d'examiner en détail comment utiliser l'application Paletton, examinons rapidement pourquoi il est important d'avoir la bonne palette de couleurs sur un site Web. Comme vous le savez, les couleurs véhiculent des messages subliminaux qui affectent les émotions du spectateur et finalement ses décisions. Les couleurs doivent également représenter la marque de l'entreprise du site Web.

La meilleure façon de choisir une palette de couleurs pour un site Web est de considérer l'ambiance que vous souhaitez qu'il représente. De la même manière que les architectes d'intérieur choisissent les couleurs pour donner une ambiance spécifique à un espace, vous pouvez faire de même pour un site Web. Pensez aux premières impressions ; Lorsque quelqu'un atterrit sur un site Web avec des couleurs vives et éclatantes, il se sentira satisfait et pourrait même sourire. Un site Web avec une palette neutre et tamisée peut calmer une personne et lui apporter un sentiment de confort.

Bien entendu, les couleurs que vous choisissez doivent également correspondre à la marque. C'est dans la combinaison et la tonalité que vous, en tant que concepteur de sites Web, occupez le devant de la scène. Choisir la meilleure utilisation des couleurs dans une palette est également important pour l'ambiance d'un site.

C'est pourquoi Paletton est l'un des générateurs de palettes de couleurs préférés. Vous pouvez prévisualiser comment une palette de couleurs est appliquée dans différentes combinaisons sur un site Web. Cela vous aide à prendre de meilleures décisions concernant les couleurs que vous choisissez. Mettre la couleur sombre comme arrière-plan par opposition à la couleur claire fera une grande différence dans la conception finale.

Toutes les palettes de couleurs commencent par une couleur de base

Pour chaque palette de couleurs que vous créez sur Paletton, vous aurez besoin d'une couleur de base avec laquelle travailler. Mais comment savoir quelle couleur de base utiliser ?

Jetez un œil au contenu que le client vous a fourni, à sa marque et à toutes les images qui vous ont été fournies.

  • Si votre client a un logo en couleur, utilisez-le comme couleur de base.
  • Utilisez un outil pipette pour extraire une couleur ou deux de l'une des images que le client vous a données.
  • Interrogez votre client sur l'ambiance et l'histoire de la marque de son entreprise.
  • Si vous créez des conceptions Web à vendre en tant que modèles ou thèmes enfants, ou pour votre portfolio, choisissez une couleur en fonction de l'ambiance que vous souhaitez donner à votre conception.

Lorsque vous créez une palette sur Paletton, vous pouvez soit choisir une couleur de base visuellement, soit un code hexadécimal dans l'onglet hexadécimal de la couleur de base.

Apprendre à connaître l'interface utilisateur de l'application Paletton

Il est maintenant temps de commencer à créer des palettes. Jetons un coup d'œil à la façon dont tout cela est mis en place. L'application comporte deux sections principales ; le côté gauche concerne la sélection des couleurs et le côté droit concerne la visualisation des aperçus.

Jetons d'abord un coup d'œil à l'outil de sélection des couleurs sur la gauche. Tout ce que vous changez de ce côté change les résultats du côté droit, mais il est préférable de comprendre d'abord de quoi chaque côté est capable.

Côté gauche – Les sélecteurs de couleurs

La première chose que vous remarquez lorsque vous entrez dans l'application Paletton est la roue chromatique. La vue par défaut a la couleur de base comme un rouge neutre dans une palette monochromatique (1 couleur).

Vous verrez un ensemble de 5 points alignés à l'intérieur du cercle de couleur. Le point au centre est la couleur de base, deux points ajoutent de la luminosité et de la désaturation tandis que les deux autres ajoutent du contraste et de la saturation.

Combinaisons de couleurs

Au-dessus du cercle de couleur se trouvent cinq boutons de combinaison. Les options sont de gauche à droite :

  • Monochromatique – 1 couleur + complémentaire en option
  • Adjacent – ​​3 couleurs + complémentaire en option
  • Triadic – 3 couleurs + complémentaire en option
  • Tétrade – 4 couleurs
  • Style libre – 4 couleurs

Couleur de base

Pour modifier la couleur de base, vous pouvez effectuer l'une des opérations suivantes :

  1. Faites glisser le point de couleur principale n'importe où dans le cercle extérieur.
  2. Faites glisser le point du milieu à l'intérieur du cercle pour choisir une teinte différente de la couleur principale choisie dans le cercle extérieur
  3. Saisissez un code hexadécimal dans l'onglet en bas à gauche.
  4. Pour transformer une couleur secondaire en couleur de base, vous devrez le faire sur le côté aperçu de l'écran. Plus à ce sujet plus tard.

Lorsque vous faites glisser le point de couleur de base à l'intérieur du cercle, tous les autres points se déplacent avec lui montrant les variantes de teinte.

Vous pouvez également sélectionner des couleurs individuelles en cliquant sur Maj avant de faire glisser.

Réglage fin

Le bouton en haut à gauche du cercle vous permet d'entrer les degrés de teinte à la main pour un réglage fin. Il y a plus de capacités de réglage avec le bouton en bas à droite. Ici, vous pouvez tout affiner sur les couleurs que vous avez choisies :

  • Teinte
  • Saturation
  • Luminosité
  • Contraste

Cliquez simplement sur les boutons pour ajouter ou diminuer chaque effet de 1, 5 ou 10 degrés.

Préréglages selon la couleur de base

La zone de sélection des couleurs a deux options de sélection principales ; Couleurs et préréglages. Nous avons regardé la section des couleurs ci-dessus. Maintenant, visitons l'onglet des préréglages. Selon la couleur de base et la combinaison que vous avez sélectionnées, les préréglages afficheront une variété de variables. Ceux-ci sont utiles si vous ne voulez pas vous soucier de la teinte, de la saturation, de la luminosité et du contraste.

Ces préréglages peuvent vous donner une bonne idée de ce qui est possible avec les couleurs que vous avez choisies et s'il existe des palettes secondaires possibles pour compléter la première.

Côté droit – Les aperçus de la palette

Sur le côté droit de la palette se trouve l'endroit où vous voyez tous les aperçus en direct. La zone principale est séparée en quatre sections pour pouvoir visualiser des palettes monochromes ou autres à deux, trois ou quatre couleurs. Chaque section de couleur montre la couleur de base dans la plus grande zone et quatre variations autour d'elle.

Dans l'image ci-dessous, vous verrez comment le sélecteur de couleurs et l'aperçu fonctionnent ensemble.

Sous le carré d'aperçu se trouve un onglet dans lequel vous pouvez modifier l'apparence des aperçus. La vue par défaut est certainement la meilleure, mais juste au cas où vous voudriez changer l'apparence des choses, ce bouton est là pour vous.

Changer la couleur de base

Dans la section d'aperçu, vous pouvez cliquer sur l'une des couleurs secondaires ou complémentaires et les transformer en couleur de base. Survolez n'importe quelle couleur et cliquez sur « Plus d'infos ». En plus de voir toutes les informations pour cette couleur, vous verrez un bouton qui dit "Appliquer comme couleur de base". Lorsque vous cliquez dessus, toutes les couleurs de la palette changeront.

Utilisation de la fonction de simulation de vision de Paletton

L'une des principales caractéristiques de Paletton est la possibilité d'évaluer l'apparence de vos couleurs dans des cas inattendus. La fonctionnalité s'appelle « Vision simulation » et vous la trouverez sous le carré d'aperçu. Voici les simulations disponibles :

  • Simulation de daltonisme
  • Désaturer
  • Simulation gamma
  • Couleurs Web (palette de 216 couleurs héritées)

C'est un excellent outil si vous créez une palette pour un site Web. Vous pouvez voir si votre palette aura l'air correcte dans tous ces cas. Le plus utile est la simulation de daltonisme. Il est bon de s'assurer que toutes les couleurs sont différenciées les unes des autres !

Voir des exemples en direct de votre palette de couleurs

Un autre outil pratique dans Paletton est l'onglet qui vous montre à quoi ressemblera la palette sur un exemple de site Web et d'autres styles de conception. Vous trouverez ces simulations dans l'onglet 'EXEMPLES…'. Le premier choix est une mise en page et cela a quelques options :

  • Page blanche
  • Page sombre
  • Conception positive
  • Conception négative

L'application peut vous montrer d'autres simulations de conceptions artistiques avec la palette de couleurs que vous avez choisie. Il existe des exemples statiques et animés. Ils sont pratiques pour avoir une bonne idée du potentiel de votre palette de couleurs.

De plus, à cette étape, vous pouvez randomiser votre palette de différentes manières :

  • Couleurs similaires, contrairement au style
  • contrairement à
  • Similaire
  • Contrairement aux couleurs, style similaire

Assurez-vous d'obtenir une copie de votre palette avant de la randomiser ! Il n'y pas de retour en arriere.

Exportation et copie d'une palette de couleurs

Maintenant que vous avez ajusté et prévisualisé votre palette de couleurs, il est temps de l'exporter depuis Paletton et de la préparer pour votre site Web.

Il existe différentes manières de copier ou d'exporter votre palette. En haut à droite de la fenêtre se trouve un bouton qui dit « partager la palette » mais semble s'être cassé il y a quelque temps. Ignorez simplement ce bouton car il ne fait rien.

Copiez votre palette de l'une des manières suivantes :

  • Copiez les codes hexadécimaux des couleurs individuelles en survolant pour les voir et en cliquant pour ouvrir la fenêtre d'informations.
  • Cliquez sur 'TABLES/EXPORTATION' pour voir les palettes dans différents formats.
  • Dans l'onglet TABLES/EXPORTATION, exportez dans l'un de ces formats :
    • Listes de couleurs
      • HTML
      • MOINS
      • CSS
      • TOUPET
      • XML
      • texte
    • Échantillons de couleurs
      • Image PNG
      • ACO (Photoshop)
      • GPL (Gimp)
  • Vous pouvez également visualiser des combinaisons de couleurs dans la palette choisie.

Ajouter des couleurs à votre site Web WordPress

Il est maintenant temps d'ajouter les couleurs à votre site !

Étant donné que l'application Paletton n'a pas été mise à jour depuis plus de 6 ans, il est préférable de télécharger la version texte simple et de saisir manuellement les couleurs dans votre feuille de style. Les fonctionnalités d'exportation peuvent ne pas fonctionner avec la feuille de style HTML ou CSS de votre site Web.

Pour ajouter des couleurs à votre thème Divi, accédez à vos options de thème et saisissez chaque couleur avec son code hexadécimal correspondant.

C'est un enveloppement de couleur !

Nous avons terminé de revoir les étapes pour créer une palette de couleurs avec Paletton. Les fonctionnalités de base de l'application sont similaires à celles d'autres applications de palette de couleurs, mais ce qui la distingue des autres, c'est la possibilité de voir les couleurs sur des exemples en direct pour la conception Web et d'autres conceptions artistiques. C'est dommage que l'application n'ait pas été mise à jour depuis plus de 6 ans. Heureusement, il semble rester en vie grâce à ces annonces Google !.

Quelle est votre application de générateur de palette de couleurs préférée ? Avez-vous déjà essayé Paletton ? Faites le nous savoir dans les commentaires!

Image en vedette via DaGaAl / shutterstock.com