Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 MENU XHTML   info xhtml  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8  - cours 9 
 Menu cours 5 XHTML  - couleurs R-V-B  - méthode hexadécimal  - méthode RGB  - exemple couleurs 
- couleur !?!  - outil pour les couleurs  - couleurs garanties  - harmonie des couleurs 



Cours 5 XHTML : les couleurs



 © LigneWeb  ... /les couleurs pour le web.
© design : LigneWeb
   © : alain jean deligne - LigneWeb
Le logo de LigneWeb





Powered and Generated by  http://www.espacejavascript.com 


Suivez-nous.








Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




Le rouge ... le vert ... le bleu ... en mélange.


... une remarque importante : les couleurs ne seront pas identiques dans les différents navigateurs ...
... et seront fonction aussi du réglage de votre écran ou moniteur ...
... ce ne sont pas non plus des couleurs d'imprimerie en Offset ...

... la première manière de nommer les couleurs est d'utiliser leur nom en anglais ...
... les noms des couleurs les plus communes sont :
Aqua Blue Fuschia Grey Green Lime
Maroon Navy Olive Purple Red Silver
Teal White Yellow AliceBlue Lavender Black


... cela donne ...
Aqua Blue Fuschia Grey Green Lime
Maroon Navy Olive Purple Red Silver
Teal White Yellow AliceBlue Lavender Black

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

... ces différentes couleurs sont utilisées pour la couleur de fond, ... la couleur du texte, ... la couleur d'une ligne, d'un encadrement, ... etc ...
... la couleur de la zone visible d'une page web se situe dans la balise body ...
... nous diront au navigateur que cette page doit avoir une couleur de fond blue ... et cela donnera dans le language html 4 ...
...  <body background-color="blue"> .............................</body> ...
... pour la couleur d'un texte, ... sa couleur sera précisée par ... color="white" ...
... mais dans le language xhtml ... cela se définit dans un fichier extérieur ...
... c'est dans le cours sur ...  les feuilles de style (CSS 2.0)  ... que cela sera développé ...

... AliceBlue et Lavender ... ne font pas parties des couleurs de base pour le web ...

Méthode hexadécimal :

... nous pouvons utiliser le codage des couleurs, ce qui permet d'avoir plus de 16 couleurs ...

... pour avoir une couleur sur un écran, il y a trois couleurs de base ...
... le rouge, le vert et le bleu (R-V-B) ...
... c'est leur mélange qui donnera le ton ...
... nous prendrons un poucentage de chacune d'elle dans l'ordre R-V-B ...
... deux valeurs pour chacune des couleurs avec les termes 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

... ce qui donne ...
Blanc : #ffffff Magenta : #ff00ff
R - : Rouge pur : #ff0000 Cyan : #00ffff
V - :     Vert pur : #00ff00 Jaune pur : #ffff00
B - :   Bleu pur : . #0000ff Noir : #000000

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

...le code de couleur est précédé de   # ... ex. : color="#00ffff"  pour le cyan ...
... lorsqu'on le nomme dans un fichier html ou dans un fichier css ... (à voir plus tard ) ...

La technique du mélange :

... la base de la réflexion ...
Blanc : #ffffff Rouge : ff - Vert : ff - Bleu : ff
Rouge : #ff0000 Rouge : ff - Vert : 00 - Bleu : 00
Vert : #00ff00 Rouge : 00 - Vert : ff - Bleu : 00
Bleu : #0000ff Rouge : 00 - Vert : 00 - Bleu : ff
Noir : #000000 Rouge : 00 - Vert : 00 - Bleu : 00

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

... les deux premiers signes sont pour le rouge ...
... les deux signes suivants sont pour le vert ...
... les deux derniers signes sont pour le bleu ...

... ... deux valeurs pour chacune des couleurs avec les signes : 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f ...
... 00 pour aucune couleur ... et ... ff comme valeur maximum pour la couleur ...

La méthode RGB ... ( Red-Green-Blue ) :

... ici, on donne une proportion des trois couleurs par un nombre ...
... ce nombre est compris entre 0 et 255 ...
... cela s'écrit ... rgb(70,120,235) ...


... la couleur de fond ... rgb(70,120,235) ...

... méthode moins utilisée dans le fichier ...  .css  ...
... une page dans Wikipédia ...  sRGB  ...






Un tableau de composition des couleurs.



... nous avons une composition de R-V-B, c'est-à-dire ... de rouge - vert - bleu ...
... la méthode hexadécimal ... en exemple ici ... :


This free script provided by ...  JavaScript Kit 
Ce script libre provient de ... JSKit, amélioré par LigneWeb.

... ici, c'est le script qui génère les tableaux et les couleurs associées ...


La structure ... du script "color.js" :
La structure ... html :
La structure ... css :
En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .



... d'autres sites ou vous retrouvez des ... palettes de couleurs pour le web  ...
... et les ...  palettes étendue de couleurs  pour le web ...
... une autre référence pour les ...  couleurs du web  ...
... il existe des petits logiciels pour visionner les couleurs ...
... pour Mac, ... le logiciel ...  iPalette , ... très pratique ...
...et ... pour PC, ... le logiciel ...  Palette 2.0 
... il existe aussi le  COLOR GUIDE  gratuit ... pour Mac et PC ( App Store - Google Play )

... ATTENTION : ... les lettres utilisées dans le code doivent être en minuscules ...
... en XHTML ... et en HTML 5 ...







Les couleurs garanties pour le web.



... contrairement à ce qu'on devrait avoir, il n'y a pas corrélation entre le pourcentage d'une couleur ...
... et le résultat effectif de cette couleur sur notre écran ...
... on ne peut obtenir la couleur identique à celle d'une impression offset ...
... "l'absence de correction gamma implique que les six intensités souhaitées ...
... 0 %, 20 %, 40 %, 60 %, 80 %, et 100 % ...
... sont affichés à 0 %, 2 %, 10 %, 28 %, 57 %, et 100 % dans un standard 2,5 gamma CRT ou LCD, ...
... et ceci faisant la plupart du temps ... des couleurs très sombres ...

... les intensités dans le bas de la gamme, particulièrement entre 0 et 3, ...
... sont quasiment indiscernables les unes des autres
" ...

... la source d'information est la ...  page Wikipédia pour les couleurs du web  ...
... comme base de réflexion ... la théorie des couleurs, comme celle des sons est bien plus complexe ...
... " seules 22 des 216 couleurs de la palette sont fidèlement affichées ...
... sans remappage incohérent sur des moniteurs 16 bits " (David Lehn et Hadley Stern) ...
#000000 - #000033 - #0000ff - #00ff00 - #00ff66 - #00ffcc - #00ffff - #33ff33 - #33ff66 - #33ffcc - #33ffff
- #66ff00 - #66ff33 - #66ffff - #ccff66 - #ff0000 - #ff0033 - #ff00ff - #ffff00 - #ffff33 - #ffff66 - #ffffff
... pour les autres couleurs ... cela se complique encore par nos réglages ...
... car fonction des ordinateurs, des écrans utilisés, de leurs réglages ...
... de la valeur gamma utilisée ... et de l'interaction des couleurs entre elles ...

... cela donne ... et avec écriture simplifiée ...
text-align:center;"
#000000 ou #000 #000033 ou #003
#0000ff ou #00f #00ff00 ou #0f0
#00ff66 ou #0f6 #00ffcc ou #0fc
#00ffff ou #0ff #33ff33 ou #3f3
#33ff66 ou #3f6 #33ffcc ou #3fc
#33ffff ou #3ff #66ff00 ou #6f0
#66ff33 ou #6f3 #66ffff ou #6ff
#ccff66 ou #cf6 #ff0000 ou #f00
#ff0033 ou #f03 #ff00ff ou #f0f
#ffff00 ou #ff0 #ffff33 ou #ff3
#ffff66 ou #ff6 #ffffff ou #fff

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...



Bleue et noire ...ou ...
... blanche et dorée ! ? !

" Postée sur les réseaux sociaux, la photo d'une robe n'en finit plus de diviser
les internautes du monde entier,
vendredi 27 février 2015 : est-elle bleue et noire, ou blanche et dorée ? "

la robe bleue et noire ou blanche et dorée
















... ± 70 % des personnes voient cette robe avec les couleurs "blanche et dorée" ...
... ± 30 % des personnes voient cette robe avec les couleurs "bleue et noir" ...
... pour cette même photo ...


 La photo de la robe 
... photo dont les couleurs sont perçues différemment par chacun d'entre nous ...
... phénomène scientifiquement expliqué ...

... voici deux liens montrant cette robe sous deux angles différents ...:
...  la première photo  ... et ...  la seconde photo sous un angle différent  ...

la robe bleue et noire ou blanche et dorée



















... cette même robe, mais "bleue et noir" ...
... photo prise sous un autre angle ... en fait, les couleurs réelles du tissus ...




... il y a donc un problème avec la couleur bleue pour les écrans de tous types ...
... l'exemple de mon site web, devant lequel vous êtes, en témoigne sans doute pour certains ... ... (!?) ...
... une variation de lumière ... ou d'angle de vue ... et ... “oups“ ...
... les écrans Rétina ... non ... (pas de pub) ... par exemple ...


Un outil pour les couleurs :

...  DIC Color Guide numérique:  ... un logiciel gratuit qui repousse les limites de la conception ...
...le Guide DIC numérique couleur est disponible pour Mac PC et smartphone ...

... un site web très bien fait sur ...  le guide de gestion des couleurs  ...






Harmonie des couleurs.



... il est important d'harmoniser les couleurs d'un site web ...
... tant au niveau des couleurs de fond des différents blocs ...
... que pour les couleurs des lettres ...

Effets entre les couleurs

... deux bandes de couleurs mises l'une à côté de l'autre peuvent avoir un effet de vibration ...
... il en résulte une difficultée à voir, même à soutenir le regard ...
... il est donc important de ne jamais avoir cet effet ...
... nous le voyons en partie dans le titre de cette page dont les couleurs varient ...
... on voit bien qu'à certains moments, cela n'est pas parfait ... dans le passage de certaines couleurs à d'autres ...

... les couleurs de fond doivent permettrent la visibilité et le confort de lecture ...
... il est important d'utiliser le contraste mais en restant dans les même tons ...

... il est aussi nécessaire d'utiliser des tons qui permettent de marquer les effets désirés ...
... l'exemple est le site web que vous avez devant les yeux ...
... ( dans la mesure où vous avez les derniers navigateurs ) ...
... nous avons des effets d'ombrages de blocs ... ce qui donne du volume ...
... le confort de lecture est amélioré ...

... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple





 MENU XHTML   info xhtml  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8  - cours 9 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours  XHTML  - Cours CSS 2  - Création site  - Cours HTML 5  - Cours CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies