HTML et son Code Couleur

[Monique]

Bonjour,

Le Hub vous propose aussi un outil bien pratique :

Assortissez les couleurs de vos pages Web

Il n'est pas toujours simple d'assortir judicieusement les couleurs de fond et d'écriture des pages Web. La lisibilité de vos pages peut être grandement impactée par un mauvais contraste de couleurs.

Cet outil vous permet d'éviter les "à peu près" et les tâtonnements dans la mise au point graphique de vos sites Web.

[pandrekano]

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

[Monique]

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

body {
background: #FFFFFF url(images/fond-degrade-3.png) repeat-y left;
}

Ce qui donne ce résultat.

[pandrekano]

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

Modifié 13 Février 2005 par pandrekano

[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

[lupucide]

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

[pandrekano]

Superbe Lupucide,

J'utilise ton code aujourd'hui.

http://ppzx.net/

Amitiés, pandrekano

[Monique]

Bonjour,

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!

<{POST_SNAPBACK}>

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

[Monique]

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

[Eclipsis]

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:

<[I]Elément[/I] style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFC2C7CB', EndColorStr='#FFECF0F3')">

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

Modifié 23 Février 2005 par Eclipsis

[Monique]

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 !

[Duxmachine]

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

Modifié 24 Mai 2005 par Duxmachine

[dunjl]

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

[DrFloyd]

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) ?

Modifié 29 Septembre 2005 par DrFloyd

[Dudu]

- 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

[Duxmachine]

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

[DrFloyd]

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

Modifié 12 Octobre 2005 par DrFloyd

[Dudu]

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+