FORMATEUR - WEBMESTRE - Tél : 06 25 27 61 68
7 rue André Bernard - 93110 Rosny sous Bois
Gestion de la couleur en CSS
En abordant la question des couleurs, nous entrons de plein pied dans l'outil CSS et le web-design. Le mot « design » se rapporte au travaille sur l'esthétique d'un objet utilitaire produit par l'industrie. Il s'agit de rendre « beau » un objet conçu avant tout pour être utile. La bonne utilisation des couleurs et des harmonies étant un aspect fondamental de la mise en forme d'un document web, voyons quels outils les style CSS proposent pour la prendre en charge.
Harmonie des couleurs
Toutes les cultures et tous les peuples ont créé leur symbolique des couleurs et associé à chacune sa valeur et son interprétation. La couleur et le thème du siteChaque site web et fondé sur un concept général et des objectifs principaux :
Cette
ligne éditoriale à des conséquences sur le choix des couleurs. À l'inverse, des site plus « conformistes » ou liés à l'histoire adopterons des teintes plus chaudes, dans les tons beige ou brun. Influence du public visé Le public visé influence grandement le choix des couleurs : Certains sites minimalistes ou très portés sur l'ergonomie prennent la décision de conserver les couleurs par défaut du Web :
Représentation de la couleurVoici peu, les limitations des ordinateurs empêchait de représenter plus de 256 couleurs simultanément. Les professionnels s'étaient alors accordés sur une palette web de 216 couleurs « sécurisés », permettant d'assurer une compatibilité parfaite entre les différents ordinateurs. En informatique, les progrès sont rapides : presque tous les ordinateurs actuels sont capable d'afficher 16 millions de couleurs. Différents codages permettent de se référer aux couleurs dans les feuilles de styles. Certains reposent sur les couleurs fondamentales, d'autres se fondent sur la luminosité, la teinte et la saturation. L'espace de couleur RGBRGB (RVB en français) est une abréviation de « red, green (vert), blue ». Datant des année 1930, ce système repose sur les caractéristiques techniques des tubes cathodiques. C'est donc une notation convenant particulièrement aux couleurs en informatique. L'espace RGB définit la proportion de chacune de ces trois couleurs fondamentales en la codant sur un octet :
C'est-à-dire une valeur comprise entre 0 et 255 pour chaque proportion des couleurs. Chaque couleur est ainsi transcrite sur trois octets, soit 256 puissance 3 ce qui représente près de 17 millions de possibilités. C'est amplement suffisant, l'œil humain ne discernant qu'un à deux millions de couleurs différentes. Pour info : forme préliminaire d'une page ancienne (2005) sur la technique de codage électronique,
récupérée et dont la reconstruction, avec le CSS conforme, sera faite ultérieurement:
La notation RGBNotation décimaleLa syntaxe CSS pour la notation des couleurs en RGB est la suivante :
On peut aussi inscrire les valeurs en pourcentages :
Ces couleurs fondamentales se composent à l'écran par
synthèse additive, moins intuitive que la
synthèse soustractive, familière aux peintres.
En modifiant la valeur de ces trois composantes, on peut représenter toute teinte imaginable.
On définira ainsi plusieurs variantes de bleu en n'agissant que sur le troisième nombre. Notation hexadécimaleC'est une autre manière d'écrire les nombres, plus adaptée à l'informatique et notamment à la manipulation d'octets. On s'y autorise seize chiffres (les chiffres habituels complétés par les six premières lettres de l'alphabet [ a,b,c d, e, f ] – généralement écrites en minuscules). Le symbole dièse # introduit une valeur RGB codée en hexadécimal.
Ces trois paires successives correspondent respectivement aux codages hexadécimaux des composantes rouge, verte et bleu de la couleur considérée. On obtiendra la couleur désirée en dosant chaque paire de chiffres hexadécimaux. Le blanc correspond ainsi à la valeur #ffffff. Traduisons en hexadécimal les déclarations de couleurs classiques :
La notation hexadécimale courteQuand le codage hexadécimal d'une couleur se compose de trois paires jumelles, comme : #ffffff, #cc55aa, #ffaa99, la syntaxe CSS permet de la condenser. On ne reporte pour cela qu'un seul caractère par couple, pour obtenir une notation à trois chiffres. #000000, #ffffff, #cc55aa et #ffaa99 deviennent respectivement : #000, #fff, #c5a et #fa9. Cette technique ne pourra toutefois condenser des notations telles que : #ffaa96, #3aaaaa, #00000f, car leurs paires de caractères consécutifs ne sont pas composées des mêmes chiffes hexadécimaux. Les mots-clés de couleursL'être humain préférant souvent les mots aux nombres, le W3C a intégré à CSS certains mots-clés anglais, représentant les couleurs les plus utilisées. Le mot green est plus facile à relire que les composantes standards du vert, qu'elles soit écrites en décimal ou en hexadécimal.
Bel outil en Flash pour aider à l'accord des couleurs : pourpre.com visualisez votre couleur sur une roue chromatique, trouvez des teintes qui s'accordent. Application pratiqueVoici une liste de couleurs, exprimées soit par mot-clé, soit par une notation hexadécimale ou RGB. Amusez-vous à trouver leur correspondance en notation hexadécimale courte.
Découvrez la palette complète des 216 couleurs sécurisées en CSS : couleur.html Solution
Haut de page Auto-entrepreneur.
|
| Dernière mise à jour le 12.08.2011 |