Un tuto de Paletton pour vous aider à choisir la palette de couleurs de votre site Web WordPress.

Dans cet article, nous verrons comment utiliser Paletton pour choisir la palette de couleurs de votre site Web 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 Web n’auront pas une palette de couleurs de marque et il vous appartiendra 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 elle fonctionne toujours parfaitement bien pour ce dont vous avez besoin. Vous trouverez l’application sur le site Paletton.com en cliquant ici.

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

Avant d’examiner en profondeur 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 tenir compte de l’ambiance que vous souhaitez qu’il dépeint. De la même manière que les architectes d’intérieur choisissent les couleurs pour donner à un espace une ambiance spécifique, vous pouvez faire de même pour un site Web. Pensez aux premières impressions; lorsque quelqu’un atterrit sur un site Web aux couleurs vives et vibrantes, 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 donner 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 Web, occupez une place centrale. Choisir la meilleure utilisation des couleurs d’une palette est également important pour l’ambiance d’un site.

C’est pourquoi Paletton est l’un des générateurs de palette de couleurs préférés. Vous pouvez prévisualiser la manière dont 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 ou deux couleurs de l’une des images que le client vous a fournies.
• Interrogez votre client sur l’humeur 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 portefeuille, choisissez une couleur en fonction de l’ambiance que vous souhaitez avec votre conception.

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

Se familiariser avec 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 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 de couleur 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 ce que chaque côté est capable de faire en premier.

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 dans une ligne à 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
• Triadique – 3 couleurs + complémentaire en option
• Tetrad – 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 principal 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 inférieur gauche.
4. Pour transformer une couleur secondaire en couleur de base, vous devrez le faire du côté de l’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, indiquant 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 de saisir les degrés de teinte à la main pour un réglage précis. Il y a plus de capacités de réglage fin 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 de couleur 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. Celles-ci sont utiles si vous ne voulez pas jouer seul avec la teinte, la saturation, la luminosité et le 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 du Paletton, vous voyez toutes les avant-premières en direct. La zone principale est séparée en quatre sections pour pouvoir visualiser des palettes monochromes ou autres avec deux, trois ou quatre couleurs. Chaque section de couleur montre la couleur de base dans la zone la plus grande 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.

Changement de 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 indiquant «Appliquer comme couleur de base». Lorsque vous cliquez dessus, toutes les couleurs de la palette changent.

Utilisation de la fonction de simulation de vision de Paletton

L’une des plus grandes caractéristiques de Paletton est la possibilité d’évaluer l’apparence de vos couleurs dans des cas inattendus. La fonctionnalité s’appelle «Simulation de vision» et vous la trouverez sous le carré de prévisualisation. Voici les simulations disponibles:

• Simulation de daltoniens
• Désaturer
• Simulation gamma
• Couleurs Web (ancienne palette de 216 couleurs)

C’est un excellent outil si vous créez une palette pour un site Web. Vous pouvez voir si votre palette sera correcte dans tous ces cas. Le plus utile est la simulation du 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 de 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 choisie. Il existe quelques exemples statiques et animés. Celles-ci 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 arrière.

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 plusieurs façons de copier ou d’exporter votre palette. En haut à droite de la fenêtre se trouve un bouton qui dit «partager la palette» mais qui semble s’être cassé il y a quelque temps. Ignorez simplement ce bouton car il ne fait rien.

Copiez votre palette de l’une de ces autres façons:

• Copiez les codes hexadécimaux des couleurs individuelles en survolant pour le voir et en cliquant pour ouvrir la fenêtre d’informations.
• Cliquez sur ‘TABLES / EXPORT’ pour voir les palettes dans différents formats.
• Dans l’onglet TABLES / EXPORT ‘, 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 afficher les combinaisons de couleurs dans la palette choisie.

Ajouter les couleurs Paletton à 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, vous feriez mieux 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.

C’est un emballage 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.