TOP 6 des sites pour trouver sa palette de couleur css

16 octobre 2019Aucun commentaire
TOP 6 des sites pour trouver sa palette de couleur css

Lorsque l’on élabore une maquette de site web ou encore lorsque l’on veut créer un logo, on se demande quelle couleur choisir. Si c’est une tâche qui semble aisée, choisir la bonne palette de couleur peut se révéler un vrai cauchemar. Quelles couleurs sont les plus harmonieuses ? Comment trouver le nuancier d’une couleur ? Quel est le code couleur CSS pour intégrer la couleur dans le webdesign ? C’est autant de questions que les outils que je vais te présenter vont apporter leur réponse. Si tu souhaites apprendre le HTML et le CSS, tu trouveras des tutoriels vidéos qui t'aideront dans cette tâche.

Code couleur HTML

https://htmlcolorcodes.com/fr/

Ce site est parfait pour obtenir les codes de couleur en HTML ou en RVB. À partir d’une couleur, tu pourras générer des harmonies de couleurs à choisir parmi :

  • Des couleurs complémentaires : les couleurs sont directement opposées l'une à l'autre sur la roue des couleurs.
  • Des couleurs triadiques : une harmonie qui se compose de trois couleurs équidistantes de l'une de l'autre sur la roue chromatique.
  • Des couleurs tétradiques : une harmonie de couleurs générée par deux ensembles de couleurs complémentaires avec un décalage de 60° sur la roue des couleurs.
  • Des couleurs analogues : elles sont créées en sélectionnant les couleurs directement adjacentes à une couleur choisie.
  • Des couleurs neutres : les couleurs sont générées sur le même principe que les couleurs analogues, mais avec un écart de 15° sur la roue des couleurs contre 30° pour les couleurs analogues.

Le site propose également une rubrique « noms de couleur ». Il existe 140 noms de couleur qui rend l’écriture du CSS plus simple. Tu pourras donc écrire dans ton code CSS « tomato » plutôt que « #FF6347 » par exemple.

coolors.co : le générateur de couleurs ultra rapide !

https://coolors.co/

Très pratique, il suffit de lancer le générateur de couleurs pour avoir une palette. Si elle ne te convient pas, pas de problème, appuie sur la barre espace et une autre palette de couleur est générée. Tu peux choisir une couleur, la verrouiller et appuyer sur la barre d’espace jusqu’à ce que tu obtiennes la palette souhaitée.

Il ne te reste plus qu’à exporter ta palette au format PDF, PNG ou SVG.

Adobe Color : générer des couleurs avec la roue chromatique

https://color.adobe.com

Adobe color permet de choisir les couleurs par l’intermédiaire de la roue chromatique. Comme nous l’avons vu un peu plus haut, le générateur d’Adobe, pourra créer des harmonies de couleurs complémentaires, triadiques, tétradiques, analogues…

Il peut également générer une palette couleur à partir d’une photo. C’est une option qui peut s’avérer intéressante.

Color hunt : la palette de couleur css pour les designers et les artistes

https://colorhunt.co/

Ce site a la particularité d’afficher une liste interminable de palettes créées par des utilisateurs. Un système de vote permet d’afficher les plus populaires. On peut chercher des palettes par couleurs ou par thématique : sombre, clair, vintage, pastel, Halloween…

Colorffy, la palette de dégradés en plus

https://www.colorffy.com

J’aime bien ce site qui, en plus de posséder tout plein de palettes, va nous proposer des dégradés. Il y a même un aperçu du dégradé de couleur sur une barre de navigation ou un bouton. En un clic, on peut copier le CSS du dégradé choisi, c’est bien pratique !

Un site que je te recommande sans hésiter.

ColorSpace, ne perds plus ton temps à choisir une palette

https://mycolor.space

ColorSpace est également un très bon site pour générer sa palette couleur. À partir d’une couleur que tu auras choisie, le site va te proposer des palettes.

Il possède également des fonctionnalités pour générer des dégradés jusqu’à 3 couleurs. Là encore, il ne reste plus qu’à copier le CSS pour l’intégrer à sa page web.

Si toi aussi, tu as repéré des générateurs de palettes couleur, n’hésite pas à m’en faire part en commentaire.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Share This
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram