Tous les créateurs de sites ont pour objectif d'être vu et de se donner une véritable identité.

Bien souvent cette identité passe par le choix du design et surtout de la couleur que l'on utilise dans ses pages HTML. La gamme des couleurs HTML est très large.

Chaque couleur est associée à un code (les codes héxadécimeaux ) qui une fois inséré dans votre code HTML fait ressortir cette couleur sur votre page. Ce code est composé d'un # et suivi d'une composition de chiffres et de lettres. Pour exemple, la couleur "noire" aura pour code HTML le #OOOOOO.

Pour insérer un mot d'une certaine couleur dans vos pages vous pouvez mettre son code dans une balise comme ici : <FONT color=#OOOOOO>MANGEUR DE CIGOGNE</FONT>

Bien sûr, cette gamme de couleurs peut être trouvée facilement sur vos outils de créations et éditeurs de sites HTML, mais quelques fois c'est pratique dans avoir une sous les yeux.

C'est pour cette raison que je mets sur le HUB cette petite palette afin de vous faire découvrir la couleur HTML et surtout le code de chacune des couleurs.

Bon design aux apprentis Picasso du Hub.

CODE COULEUR du HUB

Merci BSZcool, cela peut être bien utile.
Une alternative, bien plus au goût du jour, est d'utiliser les feuilles de styles pour cela.
Par exemple:


Cette approche a le mérite de pouvoir simplifier la source des pages lorsque l'on définit ses styles dans une feuille externe.
Elle permet aussi une plus grande souplesse dans la mise en page de tout un site.

Imaginons que tous les titres <h1> d'un site soient définis comme ceci:


Et que la classe montitre soit:


Tous les titres seront affichés en rouge.

Pour les passer tous en vert, ou en changer la taille ou la police, il suffit d'éditer cette classe pour que tous les titres <h1> du site soient modifiés.


Dan

Salut Dan
Il ne manque plus que connaitre le noms des codes couleurs
Et vive les fds (feuilles de style)

le code couleur #00000 n' est pas bon pour les feuille de style ?

Bonjour Coyote,

Je suis heureuse de te retrouver sur le Hub

A condition d'écrire #000000
Tu peux utiliser indifféremment le nom (toujours en anglais) ou le mode hexadécimal (toujours 6 valeurs).
Ce mode reconstitue la couleur désirée par rapport aux trois couleurs de bases Rouge, Vert et Bleu (valeurs RGB).

Salut Monique,

Les standards admettent un code hexa en 3 chiffres, exemple #FCE qui est équivalent à #FFCCEE, mais en plus court

Dan

on rentre dans le touffu, là quand même. 5 ans d'animations de sites, des milliers de pages à mon actif et JAMAIS j'ai mis des hexa à 3 chiffres
Ca risque de perdre les débutants qui viennent sur le forum...

Oui, c'est pour cela que je ne n'ai pas parlé.
En fait, il n'y a pas si longtemps que j'ai découvert cette possibilité et je n'éprouve pas le besoin de changer mes habitudes.
Et comme ce sont le plus souvent les valeurs à 6 chiffres que l'on donne sur les différents sites...

Salut à tous

Il y a quelques temps, j'ai réalisé en html et javascript une sorte de mire des 216 couleurs présentées sous un aspect différent de celui qu'on connaît habituellement, avec un dégradé des couleurs et la possibilité de cliquer sur la couleur pour avoir sa valeur hexadécimale...

Rien d'extraordinaire non plus, mais si je retrouve ça dans mes archives, autant en faire profiter tout le monde

Pour info : vous rendez-vous compte que pour afficher la totalité des 16'777'216 couleurs (256^3), il faudrait une image carrée de 4'096 pixels de côté ?!

J'ai ca.. Je n'ai pas le nom de l'auteur, s'il se reconnait, je lui en suis reconnaissant, qu'il se manifeste, je lui rendrais hommage.
En attendant, qu'il m'excuse....

Sur une page HTML celà peut donner ce joli arc en ciel, bien pratique mais il faudrait retrier les couleurs par couleur et non par code HTML, et là c'est plus difficile.

Ou en 3 dimensions ?? Genre hologramme !!

Bonsoir,

Je trouve celui-ci génial !
Il permet de déterminer une couleur de fond et ensuite de faire varier la couleur du texte. Celui qui choisi encore une association rendant la lecture pénible, voire impossible, est impardonnable !

Il est bien ce Colorizer, les couleurs sont triès comme dans un planisphère.
Helàs le roll over avec la souris est imprecis,
Il aurait été plus judicieux de permettre le rollover avec la touch tab et jouer avec le focus.
Mais celà donne déjà une bonne idée et pense même m'en servir

Et aussi celui là pour compléter la liste : http://www.france-webmaster.com/color.php

Bonsoir,

celui là est carrément génial, il aide non seulement à trouver les codes mais aussi les harmonies qui vont bien...
http://www.pixy.cz/apps/barvy/index-en.html

Très cordialement

Bonsoir,

Effectivement ton adresse est vraiment sympa et permet en un clin d'oeil de se donner une idée d'un futur design de site...

merci pour ce lien

Pour completer la liste, voici les deux que j'utilise :
http://traumwind.de/blog/trw_colormatch.html
http://www.yoyodesign.org/outils/ncolor/ncolor8.html.en

il y a aussi ce petit convertisseur rgb

http://www.ccim.be/ccim328/trucs/memoire/codeRGB.html

Bonjour,

J'aime beaucoup le CHROMOWEB qui permet de faire des accords de couleurs sans trop de fausses notes...

si vous ca peut vous interesser, voici d'autres facons aussi de voir les palettes web dans un meme fichier :
http://www.espace-allemand.com/flash/couleurs-web.html

Une methode pour avoir de belles couleurs, consiste aussi à "sampler" les couleurs de la nature, en echantillonant les couleur d'une photo avec un soft du style color picker : http://www.iconico.com/colorpic/

Les couleurs naturelles sont souvent moins flashy et l'oeil est habitué à ces harmonies

EDIT : example ici http://www.boxesandarrows.com/archives/nat...face_design.php

Excellents exemples Sebastien :up:

Bonjour, je voudrais savoir si quelqu'un connait le code couleur de la barre des taches bleue de windows XP. Je suis en train de faire les graphismes pour un site et j'aimerai reproduire exactement la meme couleur!

Merci beaucoup!

Voir soft cité au dessus :
http://www.iconico.com/colorpic/

Bonjour,

Le Hub vous propose aussi un outil bien pratique :
Assortissez les couleurs de vos pages Web

Merci beaucoup pour toutes ces recherches super !

Toutefois, j'aimerais aussi savoir si on peut (et comment) réaliser des couleurs dégradées, autrement qu'avec une image comme fond.

Amitiés, pierreandre

Bonjour Pierre,

Il est possible d'obtenir des effets de dégradés avec des scripts php.

Mais le plus souvent pour obtenir un fond dégradé sur une page, on utilise une image de fond réalisée avec un logiciel comme PhotoShop ou Gimp 2 (le pas à pas pour Gimp) comme celle-ci :



et le style

Ce qui donne ce résultat.

Merci beaucoup Monique,

J'aime beaucoup ta clarté et tes exemples.

Je crois avoir compris et je vais le faire avec photoshop, car je n'ai pas pu télécharger Gimp (mais c'est une autre histoire...)

J'ai déjà une petite image dans ce bloc (ou dans le «body» si je procède autrement) est-ce que je peux avoir en plus une autre image de fond ?

En plus c'est un bloc «absolute», mais je pense pouvoir le placer en «float?» parce que je crois que l'on ne peut pas jouer avec la hauteur dans les calques quand c'est dans la position «absolute». Ouf !

Mon problème se situe d'abord devant l'ordi, ce qui est difficilement accessible pour toi. Tu en verras les ravages à : http://ppzx.net/

Mon objectif est donc de dégrader du foncé au plus pâle.

Je te remercie pour toute cette belle information que tu m'as déjà donnée ! pandrekano

C'est OK pour le dégradé, grâce à tes indications, Monique.

Merci beaucoup.
Je vais voir ce que je peux faire pour l'autre image, sinon, je l'enlèverai. Peut-être un «mal» pour un «bien».
Amitiés, pandrekano

Je rajoute un lien sympa : HTML Color Names (à moins d'avoir mal lu il n'est pas passé).

Superbe Lupucide,

J'utilise ton code aujourd'hui.
http://ppzx.net/

Amitiés, pandrekano

Bonjour,

Pour les utilisateurs de Firefox, il y a l'extension ColorZilla, multi-plateformes bien-sûr et offrant beaucoup de fonctions intéressantes :
- copie d'une couleur sous différents formats
- sauvegarde des palettes préférées
- zoom
- ouverture de Dom Inspector sur le dernier élément sélectionné
- mesure de la distance entre deux points dans la fenêtre
- donne des informations sur l'élément survolé (balise, classe, identificateur, taille...)
-... je vous laisse découvrir

Bonjour,

A propos de l'utilisation des couleurs, je voudrais attirer l'attention sur les problèmes des internautes souffrant de dyschromatopsie : Les couleurs pour les daltoniens

Sinon, pour faire des dégradés, il y a la méthode suivante, qui n'est pas franchement conseillée (ne fonctionne a priori que sous IE5.5+), mais qui peut éviter d'avoir à utiliser une image:où StartColorStr correspond à la couleur de départ, EndColorStr à la couleur d'arrivée et GradientType à l'orientation: 0 pour vertical, 1 pour horizontal (par défaut)... (Pour plus d'infos, voir cette page). A+

(Bon, j'avoue, là je complique la chose avec des couleurs avec 8 chiffres)
En revanche, je peux dire qu'aujourd'hui j'ai appris quelquechose, vu que je ne connaissais pas le coup des codes à 3 chiffres, merci Dan

Bonjour,

L'usage des tags est à la mode : les photos (celles d'Olivier devraient plaire à Karl ), les liens (les miens sur BlogMarks.net)...

Les graphistes s'y sont mis aussi. Un click sur une couleur affiche toutes les palettes qui ont été déposées sur le site, avec un lien vers la page d'origine : Colorschemer
Le site est très beau en plus !

Salut,

j'avais fait un script PHP tout con (comme son auteur) qui utilisait JS pour trouver ces couleurs et surtout avec une large zone de visualisation pour la comparer à sa page.
Il est divisé en 4 parties: de la plus sombre à la plus claire

Cliquez sur DEMO dans la marge de droite
http://www.comscripts.com/scripts/php.abccamaieu.1696.html

Quelques liens pour completer la liste:
visibone, il faut descendre dans la page et trouver Free Online Services, plusieurs outils interessants

Color Scheme Generator 2 permet de composer une association de couleur avec exemple à l'appui, appliquer des variations (normal, pastel, contrasté, pale ...) et également de visualiser les couleurs suivant la déficience visuelle de l'internaute (dont je fais partie). Superbe outil

Chromograf de pourpre.com. Très complet et en français !

Voila je ne crois pas les avoir vus dans le post ... bon choix de couleur !

dunjl

Bonjour à tous,

Je suis un membre "tout frais" et j'aimerais profiter de ce topic sur la couleur pour poser une question :

Est-ce qu'au jour d'aujourd'hui, il est toujours aussi important de respecter la palette de couleur Netscape (web safe color) ? Et si on passe outre est-ce que l'on risque que la charte graphique de notre site présente de grandes différences chez nos visiteurs (ex : j'ai un joli brun clair sympa sur mon pc à la maison et ça devient un vilain brun "caca" sur le mac d'un ami)

Merci d'avance pour votre aide.
DrFloyd

PS : Je me suis toujours posé la question de savoir pourquoi il n'y avait pas de norme établie pour codifier la couleur sur les différents systèmes informatiques standards ? Est-ce que quelqu'un peut apporter de l'eau à mon moulin (216 couleurs je trouve ça un peu léger, pas vous) ?

- les codes héxa ou bien rgb sont beaucoup plus sûrs. En réalité c'est même déconseillé de travailler avec les soi-sidant couleurs sûres de netscape
- tu as devant toi un choix de 16 millions de couleurs on est loin des 216 dont tu parles

4096 couleurs exactement en HEX (16*16*16)
Si tu choisis d'autres nuances, elles paraîtront correspondre avec les couleurs de tes images mais chez quelqu'un d'autre, on verra peut être la déifférence.
C'est pour celà qu'on surnomme celà des safe colors

Ok,

Merci pour vos réponses... effectivement j'utilise les codes HEX mais je me demandais si j'étais obligé d'utiliser le code hex des "safe color" seulement, pour m'assurer la compatibilité sur tous les systèmes...

J'ai bien compris le concept du RGB transformé en HEX et je ne comprenais donc pas pourquoi il pouvait y avoir des problèmes selon le système du visiteur (lu plusieurs articles sur les safe color et jamais trop compris le bins)...

Alors donc ces "safe color" c'est seulement pour ceux qui ne travaille pas en hex?

Merci pour votre support en tout cas...
Fabien

Salut

• Aucun problème à utiliser tous les codes héxadécimaux ou RGB possibles, laisse tomber cette histoire de safe colors qui date de Netscape en l'an 2000
• La différence entre une notation héxadécimale et une notation RGB c''est juste la notation: les couleurs sont les mêmes.
  Par exemple tu peux écrire au choix rgb(255,255,255) ou bien #fff cela revient au même
• Ce que tu as lu sur les problèmes de couleur selon le système du visiteur est soit très vieux soit très faux (certainement les 2). Si problème il y a, cela vient de la manière dont l'écran est calibré.
  Habituellement, tous les constructeurs d'écran font en sorte que leurs produits sortent d'usine calibrés normalement mais on n'est jamais à l'abri d'un Géo Trouvetout un peu toqué qui va mettre le bronx dans les réglages gamma de son moniteur. Et là, désolé c'est tant pis pour lui: il n'avait qu'à savoir ce qu'il faisait et ce n'est pas au webmaster d'un site à tenter de lui rendre une vision correcte.

A+