Partagez cet article:Share on Google+0Share on Facebook0Tweet about this on Twitter

colortitre

Quand on choisit une couleur dominante pour créer un site web ou un visuel, on se demande toujours « Mais avec quel type de couleur je vais bien pouvoir l’accorder ? Est-ce que ce vert va aller avec ce jaune ? » Je ne sais pas vous, mais moi, je me pose souvent la question. J’ai donc effectué des recherches pour trouver des liens utiles qui pourraient répondre à ces questions.

Cet article sera détaché en trois grandes parties. La première étant une brève présentation de l’utilisation des couleurs dans du code, une seconde partie vous présentant des sites qui proposent des palettes de couleurs déjà crées, puis nous terminerons pour des sites ou vous pourrez créer vos propres palettes de couleurs, si vous êtes un artiste ou que vous voulez tester de nouvelles combinaisons. A noter avant tout, que tous les sites dans la partie « palette à créer », proposent eux aussi des palettes pré-créées.

Utiliser des couleurs

Les couleurs sont des chiffres et les chiffres des couleurs. Je veux mettre des chiffres dans mes pages web pour lui donner vie. Les couleurs en informatique sont bien représentées par du code, je ne vous apprends rien. Quand vous parcourez le code source des sites, vous trouvez plusieurs façons d’importer ces couleurs dans le CSS de votre page web ou vers les logiciels que vous utilisez.

#c0392b = rgb (192, 57, 43) = rgba(192, 57, 43,1.0) = hsl(6,63%,46%) = Rouge

Ce qui vous permet d’être très précis dans le choix des couleurs que vous souhaitez utiliser et son interprétation par le navigateur.

Hexacimal

Une couleur est définie en CSS, la plupart du temps en Hexadécimal (un dièse suivi de 6 chiffres et/ou lettres); les deux premiers représentent la proportion de rouge ici « c0″, les deux suivants la proportion de vert  « 39″ et les deux derniers le bleu « 2b ». En mélangeant le tout, on obtient la couleur voulue.

RGB

Toujours le même principe ou l’on a une proportion de couleur (rouge, vert, bleu), mais d’une façon différente. Pour l’explication, il faut connaître le format binaire. Mais pour aller plus vite et mieux vous aidez à comprendre dans un premier temps, c0 (hexadécimal) = 11000000 (en binaire) = 192 (en décimal) .

Si vous voulez faire le test, vous pouvez aller sur ce convertisseur de binaire, hexadécimal et décimal.

RGBA

Le a signifie opacité et 0 est équivalent à transparent, 1 à opaque.

HSL

Les couleurs peuvent aussi être définie en utilisant le modèle teinte-saturation-lumière (HSL). Il existe comme pour le RGBA une extension pour l’opacité.
Si vous souhaitez en savoir plus, je vous conseille de lire ce lien

Convertisseur

rgb.toest un site qui propose entre autre, un convertisseur complet pour rendre compatible vos couleurs aux formats que vous souhaitez.

Palettes déjà prête

COULOURLOVERS

colorslovers
Ici, vous trouverez sur la page d’accueil une liste de Palettes pré-crées, ainsi que des patterns et toutes sorte d’outils qui vous permettront de créer un contenu visuel concordant.

the day’s color

thedayscolor

Est un site très efficace et minimaliste. Il met en relation des couleurs dites « digestes entre elles ». Ces couleurs sont présentées dans des ronds avec un background de couleurs. Vous pouvez donc voir avec quel type de fond et de couleurs, vous pouvez les associer.

Color Combos

colorcombos

Voici une bibliothèque de combinaisons de couleurs. Ces palettes peuvent être crées par les utilisateurs, notées et commentées par les utilisateurs.

Google Color

googlecolor

Google propose un guide d’utilisation pour effectuer des créations avec harmonie et dans les règles de l’art made in Google.

 

Palettes à créer

Adobe Color CC

AdobeColorCC

Adobe color vous propose de créer vos propres palettes de couleurs avec des outils qui vous aideront à rester cohérent. C’est aussi une extension que vous pouvez greffer à Photoshop. Le site se découpe en trois parties. La partie « création » ou vous pourrez donc créer vos propre palettes de couleurs et la partie « Explorer » qui vous permettra de choisir entre des palettes qui ont déjà été créées et la partie « Mes thèmes ».

paletton

palleton

Dans le même style que le précédent, Paletton vous proposera de choisir une couleur et un aperçu des différentes combinaisons.

Bonus

designspiration

designspiration
Pour terminer voici un site qui vous affiche une liste de créations visuelles (affiches, graphique etc.) avec comme dominante la couleur que vous avez choisie.