Modification de Utilisateur:InvocK/Thèmes de couleurs

<!--<div style="position:absolute;top:-129px;left:-176px;z-index:150">[[Fichier:Logo-Kwak.png|link=Accueil|KWAAK !!]]</div>-->
<!-- En-tête -->
<center><span style="text-align:right; font-size:85%;">'''Pages personnelles :'''</span> <span style="background:white; text-align:center; border:2px solid #c7daf6; {{arrondi|5px}}; padding:2px; font-size:85%;"> [[Utilisateur:InvocK|Présentation]] '''·''' [[Utilisateur:InvocK/Contributions|Contributions]] '''·''' [[Utilisateur:InvocK/Équipes|Équipes]] '''·''' [[Utilisateur:InvocK/Liste de tâches|Liste de tâches]] '''·''' [[Utilisateur:InvocK/Pages conseillées|Pages conseillées]] '''·''' [[Utilisateur:InvocK/Bac à sable|Bac à sable]]</span></center>
<div style="text-align:center; margin-bottom:1.5em;"><span style="text-align:right; font-size:85%;">'''Autres :'''</span> <span style="background:white; text-align:center; border:2px solid #c7daf6; {{arrondi|5px}}; padding:2px; font-size:85%;">[[Utilisateur:InvocK/Idées pour page utilisateur|Idées pour page utilisateur]] '''·''' [[Utilisateur:InvocK/Thèmes de couleurs|Thèmes de couleurs]] '''·''' [[Utilisateur:InvocK/Théorie du dresseur phobique|Théories farfelues]]</span> <span style="text-align:right; font-size:85%;">'''Me contacter :'''</span> <span style="background:white; text-align:center; border:2px solid #c7daf6; {{arrondi|5px}}; padding:2px; font-size:85%;"> [[Discussion utilisateur:InvocK|Page de discussion]] '''·''' [mailto:invock.pkp@gmail.com E-mail]</span></div>
<!-- Fin En-tête -->

Cette page contient plusieurs thèmes de couleurs assorties. Vous pouvez vous en servir ou vous en inspirer pour donner un aspect agréable à un modèle que vous créez ou à votre page personnelle.

==Quelques principes à retenir==
<u>'''Ces principes sont des recommandations, pas des obligations'''</u>, rappelez-vous que ce qui compte au final, c'est avant tout que votre page reflète votre personnalité. Je donne juste des conseils pour vous éviter de "trop en faire" et d'obtenir des résultats pas toujours heureux..

*'''Privilégiez un fond clair''' : Ce qui importe, c'est ce qui est écrit dans la page, pas le fait que la page soit multicolore. Un fond violet ou rouge éclatant ne fera que distraire, voire agresser le lecteur. Préférer les teintes pâles ou pastels est une bonne façon d'éviter ce genre de chose.
*'''Pour les zones de texte, préférez le fond blanc''' : Encore une fois, un fond coloré peut être trop distrayant pour le lecteur. Le noir sur blanc est une valeur sûre, confortable pour tout le monde et qui permet d'éviter les fautes de goût.
*'''Ne faites pas un arc-en-ciel''' : Il suffit de seulement deux ou trois couleurs pour avoir un ensemble agréable, vouloir en faire plus peut souvent amener à en faire trop.
*'''Choisissez des couleurs assorties''' : Le jaune se marie mieux avec l'orange que le violet. Le turquoise fonctionne bien avec le vert, mais plutôt mal avec le rouge.
*'''Si vous voulez vous baser sur un Pokémon, référez-vous à sa palette''' : C'est tout simple, avec n'importe quel logiciel de retouche d'image, il suffit de sélectionner une couleur et de copier son code hexadécimal.

==Les exemples==
Pour couvrir un maximum de teintes différentes, j'ai choisi de regrouper les [[Liste des Pokémon par couleur|couleurs du Pokédex]], avec à chaque fois un Pokémon correspondant.

===Blanc / Reshiram===
Jouer avec le blanc est très facile : il suffit d'utiliser tout, sauf du blanc ! Des teintes de gris claires se détachant suffisamment les unes des autres peuvent par exemple convenir parfaitement.

Le sprite :
[[Image:Sprite 0643 NB.png]]

Ce qu'on peut faire avec :
<table class="table" style="width:70%; {{arrondi|10px}}; border:5px solid #bdbdbd; background:#bdbdbd; margin-bottom:4px;">
<caption style="font-size:250%; margin-bottom:8px; text-align:center; color:#737b9c">'''Un titre'''</caption>
<tr><td style="width:70%">
<div style="{{arrondi|8px}}; border:solid 2px #737b9c; background:white; padding:5px;">
<div style="font-size:150%; text-align:center;">'''Un sous-titre pour cette case'''</div>
Et un texte juste en dessous, qui peut être agrémenté avec tout ce que vous voulez (blabla, images, liens, etc.)
</div>
</td>
<td style="width:30%">
<div style="{{arrondi|8px}}; border:solid 2px #737b9c; background:#ffddb0; padding:5px;">
Pour distinguer cette case, j'y ai appliqué un fond très clair pour que la lecture reste facile.
</div>
</td></tr>
</table>

Les couleurs utilisées sont :
* pour le fond d'ensemble > <span style="background:#bdbdbd">#bdbddbd</span>
* pour le grand titre et les bordures > <span style="color:white; background:#737b9c">#737b9c</span>
* pour le fond de la deuxième case > <span style="background:#ffddb0">#ffddb0</span> (orange clair)

L'exemple de Reshiram m'a fait utiliser des teintes de gris, et une note d'orange pour rappeler son feu. Si j'avais pris Gardevoir, j'aurai plutôt utilisé du vert et du rouge, et avec Pachirisu, du bleu clair et du jaune.

===Bleu / Akwakwak===
Le bleu est l'une des couleurs les plus utilisées. Il dispose d'une multitude de variantes qui le rendent facile et agréable à manipuler.

Le sprite :
[[Image:Sprite 0055 NB.png]]

Ce qu'on peut faire avec :
<table class="table" style="width:70%; {{arrondi|10px}}; border:5px solid #c7daf6; background:#c7daf6; margin-bottom:4px;">
<caption style="font-size:250%; margin-bottom:8px; text-align:center; color:#79a0ca">'''Un titre'''</caption>
<tr><td style="width:70%">
<div style="{{arrondi|8px}}; border:solid 2px #79a0ca; background:white; padding:5px;">
<div style="font-size:150%; text-align:center;">'''Un sous-titre pour cette case'''</div>
Et un texte juste en dessous, qui peut être agrémenté avec tout ce que vous voulez (blabla, images, liens, etc.)
</div>
</td>
<td style="width:30%">
<div style="{{arrondi|8px}}; border:solid 2px #79a0ca; background:#efefef; padding:5px;">
Pour distinguer cette case, j'y ai appliqué un fond très clair pour que la lecture reste facile.
</div>
</td></tr>
</table>

Les couleurs utilisées sont :
* pour le fond d'ensemble > <span style="background:#c7daf6">#c7daf6</span>
* pour le grand titre et les bordures > <span style="color:white; background:#79a0ca">#79a0ca</span>
* pour le fond de la deuxième case > <span style="background:#efefef">#efefef</span> (un blanc appelé « ''argile'' »)

Puisqu'Akwakwak a le frond orné d'un Rubis, il est également possible de placer une petite note de <font color=darkred>rouge</font>, mais il faut faire attention à ne pas en abuser !

===Gris / Airmure===
On a tendance à dire du gris qu'il s'agit d'une couleur "froide et impersonnelle". C'est très exagéré à mon avis : le gris est une couleur qui cache bien son jeu, et qui obéit à la même règle que le blanc : pour tirer quelque choses du gris, il faut lui échapper en le "détournant". On peut avoir du gris-bleu, du gris-jaune, du gris-violet ou du gris-rouge, quasiment tout est possible !

Le sprite :
[[Fichier:Sprite 0227 NB.png]]

Ce qu'on peut faire avec :
<table class="table" style="width:70%; {{arrondi|10px}}; border:5px solid #adc0da; background:#adc0da; margin-bottom:4px;">
<caption style="font-size:250%; margin-bottom:8px; text-align:center; color:#da555c">'''Un titre'''</caption>
<tr><td style="width:70%">
<div style="{{arrondi|8px}}; border:solid 2px #da555c; background:white; padding:5px;">
<div style="font-size:150%; text-align:center;">'''Un sous-titre pour cette case'''</div>
Et un texte juste en dessous, qui peut être agrémenté avec tout ce que vous voulez (blabla, images, liens, etc.)
</div>
</td>
<td style="width:30%">
<div style="{{arrondi|8px}}; border:solid 2px #da555c; background:#efffff; padding:5px;">
Pour distinguer cette case, j'y ai appliqué un fond très clair pour que la lecture reste facile.
</div>
</td></tr>
</table>

Les couleurs utilisées sont :
* pour le fond d'ensemble > <span style="background:#adc0da">#adc0da</span> (gris-bleu)
* pour le grand titre et les bordures > <span style="color:white; background:#da555c">#da555c</span>
* pour le fond de la deuxième case > <span style="background:#efffff">#efffff</span> (quasiment blanc)

Ici finalement, le gris s'est "effacé" pour laisser place à l'autre couleur dominante d'Airmure : le rouge de ses ailes. <u>Attention au rouge, qui est une couleur qu'il faut souvent adoucir (voir plus bas).</u>

===Jaune / Pikachu===
Le jaune est une couleur difficile, surtout sur fond blanc. Il s'agit d'une teinte claire, lumineuse et souvent "flashy", un véritable piège dont il faut apprendre à désamorcer les mécanismes, sous peine d'explosion de vos globes oculaires !

Le sprite :
[[Image:Sprite 0025 ♂ NB.png]]

Ce qu'on peut faire avec :
<table class="table" style="width:70%; {{arrondi|10px}}; border:5px solid #f2dda5; background:#f2dda5; margin-bottom:4px;">
<caption style="font-size:250%; margin-bottom:8px; text-align:center; color:#deaa1d">'''Un titre'''</caption>
<tr><td style="width:70%">
<div style="{{arrondi|8px}}; border:solid 2px #deaa1d; background:white; padding:5px;">
<div style="font-size:150%; text-align:center;">'''Un sous-titre pour cette case'''</div>
Et un texte juste en dessous, qui peut être agrémenté avec tout ce que vous voulez (blabla, images, liens, etc.)
</div>
</td>
<td style="width:30%">
<div style="{{arrondi|8px}}; border:solid 2px #deaa1d; background:#ffffd0; padding:5px;">
Pour distinguer cette case, j'y ai appliqué un fond très clair pour que la lecture reste facile.
</div>
</td></tr>
</table>

Les couleurs utilisées sont :
* pour le fond d'ensemble > <span style="background:#f2dda5">#f2dda5</span>
* pour le grand titre et les bordures > <span style="color:white; background:#deaa1d">#deaa1d</span>
* pour le fond de la deuxième case > <span style="background:#ffffd0">#ffffd0</span> (blanc « ''crème'' »)

Je ne vais pas mentir, j'ai dû beaucoup tâtonner pour arriver à ce résultat. Il fallait trouver un jaune clair facile à distinguer du fond, et aussi un jaune foncé ne tournant pas au poussin ou au citron, synonymes de décollement instantané de la rétine. Si vous voulez utiliser du jaune, soyez prudents et exigeants !

===Marron / Évoli===
Souvent déconsidéré (on le dit « ''sale'' » ou « ''triste'' »), le marron est pourtant une couleur riche en variantes, facile à dompter et pouvant offrir de très jolis résultats.

Le sprite :
[[Image:Sprite 0133 NB.png]]

Ce qu'on peut faire avec :
<table class="table" style="width:70%; {{arrondi|10px}}; border:5px solid #e6c594; background:#e6c594; margin-bottom:4px;">
<caption style="font-size:250%; margin-bottom:8px; text-align:center; color:#a4624a">'''Un titre'''</caption>
<tr><td style="width:70%">
<div style="{{arrondi|8px}}; border:solid 2px #a4624a; background:white; padding:5px;">
<div style="font-size:150%; text-align:center;">'''Un sous-titre pour cette case'''</div>
Et un texte juste en dessous, qui peut être agrémenté avec tout ce que vous voulez (blabla, images, liens, etc.)
</div>
</td>
<td style="width:30%">
<div style="{{arrondi|8px}}; border:solid 2px #a4624a; background:#f5f5dc; padding:5px;">
Pour distinguer cette case, j'y ai appliqué un fond très clair pour que la lecture reste facile.
</div>
</td></tr>
</table>

Les couleurs utilisées sont :
* pour le fond d'ensemble > <span style="background:#e6c594">#e6c594</span>
* pour le grand titre et les bordures > <span style="color:white; background:#a4624a">#a4624a</span>
* pour le fond de la deuxième case > <span style="background:#f5f5dc">#f5f5dc</span> (beige clair)

Et voilà, un résultat agréable obtenu très rapidement.

===Noir / Zekrom===
Attention : COULEUR PIÈGE !! Ne cédez <u>jamais</u> à la tentation du cadre ''tout noir'' (#000000), il n'y a rien de pire pour gâcher totalement une page et la rendre illisible à cause d'un contraste trop élevé. Évitez également si possible d'abuser du texte blanc sur fond noir : c'est difficile à lire pour certaines personnes.<br>
Voyons ce que nous allons pouvoir tirer de Zekrom.

Le sprite :
[[Image:Sprite 0644 NB.png]]

Ce qu'on peut faire avec :
<table class="table" style="width:70%; {{arrondi|10px}}; border:5px solid #8f8f8f; background:#8f8f8f; margin-bottom:4px;">
<caption style="font-size:250%; margin-bottom:8px; text-align:center; color:#313139">'''Un titre'''</caption>
<tr><td style="width:70%">
<div style="{{arrondi|8px}}; border:solid 2px #313139; background:white; padding:5px;">
<div style="font-size:150%; text-align:center;">'''Un sous-titre pour cette case'''</div>
Et un texte juste en dessous, qui peut être agrémenté avec tout ce que vous voulez (blabla, images, liens, etc.)
</div>
</td>
<td style="width:30%">
<div style="{{arrondi|8px}}; border:solid 2px #313139; background:#a9eafe; padding:5px;">
Pour distinguer cette case, j'y ai appliqué un fond très clair pour que la lecture reste facile.
</div>
</td></tr>
</table>

Les couleurs utilisées sont :
* pour le fond d'ensemble > <span style="background:#8f8f8f">#8f8f8f</span>
* pour le grand titre et les bordures > <span style="color:white; background:#313139">#313139</span>
* pour le fond de la deuxième case > <span style="background:#a9eafe">#a9eafe</span> (bleu « ''azurin'' »)

Explication : Pour le fond, un gris assez sombre. Pour le titre et les bordures, un noir "adouci" pour éviter le noir total. Enfin, pour la deuxième case, j'ai fait le choix d'utiliser un bleu azurin, présent sur la crête et la queue de Zekrom, pour éviter que la page ne ressemble à un faire-part de décès. J'aurais pu également utiliser quelque notes de <font color=darkred>rouge</font> pour rappeler la couleur de son œil. Attention tout de même à ne pas transformer la page en sapin de noël !

===Rose / Mew===
J'entends déjà des cris de tous les côtés : « ''le rose, ça fait fille'' ». Mais le rose, ce n'est pas seulement le rose bonbon des poupées Barbie. Il y a le rose carné, le rose framboise, le rose pêche, le rose pelure d'oignon ! Le nombre de variantes du rose est impressionnant, et à vrai dire, le rose est globalement plus facile à utiliser que le rouge, parce qu'il est plus clair et plus doux. Voyons cela de plus près.

Le sprite :
[[Fichier:Sprite 0151 NB.png]]

Ce qu'on peut faire avec :
<table class="table" style="width:70%; {{arrondi|10px}}; border:5px solid #fec0db; background:#fec0db; margin-bottom:4px;">
<caption style="font-size:250%; margin-bottom:8px; text-align:center; color:#b46294">'''Un titre'''</caption>
<tr><td style="width:70%">
<div style="{{arrondi|8px}}; border:solid 2px #b46294; background:white; padding:5px;">
<div style="font-size:150%; text-align:center;">'''Un sous-titre pour cette case'''</div>
Et un texte juste en dessous, qui peut être agrémenté avec tout ce que vous voulez (blabla, images, liens, etc.)
</div>
</td>
<td style="width:30%">
<div style="{{arrondi|8px}}; border:solid 2px #b46294; background:#fee7f0; padding:5px;">
Pour distinguer cette case, j'y ai appliqué un fond très clair pour que la lecture reste facile.
</div>
</td></tr>
</table>

Les couleurs utilisées sont :
* pour le fond d'ensemble > <span style="background:#fec0db">#fec0db</span>
* pour le grand titre et les bordures > <span style="color:white; background:#b46294">#b46294</span>
* pour le fond de la deuxième case > <span style="background:#fee7f0">#fee7f0</span> (« ''cuisse de nymphe'' »)

===Rouge / Cizayox===
Tout comme le jaune, le rouge est une couleur difficile, qui peut aveugler un lecteur si elle est mal dosée.

Le sprite :
[[Image:Sprite 0212 ♂ NB.png]]

Ce qu'on peut faire avec :
<table class="table" style="width:70%; {{arrondi|10px}}; border:5px solid #fc9a9a; background:#fc9a9a; margin-bottom:4px;">
<caption style="font-size:250%; margin-bottom:8px; text-align:center; color:#a42929">'''Un titre'''</caption>
<tr><td style="width:70%">
<div style="{{arrondi|8px}}; border:solid 2px #a42929; background:white; padding:5px;">
<div style="font-size:150%; text-align:center;">'''Un sous-titre pour cette case'''</div>
Et un texte juste en dessous, qui peut être agrémenté avec tout ce que vous voulez (blabla, images, liens, etc.)
</div>
</td>
<td style="width:30%">
<div style="{{arrondi|8px}}; border:solid 2px #a42929; background:#fde9e0; padding:5px;">
Pour distinguer cette case, j'y ai appliqué un fond très clair pour que la lecture reste facile.
</div>
</td></tr>
</table>

Les couleurs utilisées sont :
* pour le fond d'ensemble > <span style="background:#fc9a9a">#fc9a9a</span>
* pour le grand titre et les bordures > <span style="color:white; background:#a42929">#a42929</span>
* pour le fond de la deuxième case > <span style="background:#fde9e0">#fde9e0</span> (« ''coquille d’œuf'' »)

Évitez absolument le rouge ''red'' (#ff0000), qui est trop violent pour être utilisé autrement que pour les textes écrits.

===Vert / Libégon===
Voisin du bleu, le vert est lui aussi relativement facile à exploiter.

Le sprite :
[[Image:Sprite 0330 NB.png]]

Ce qu'on peut faire avec :
<table class="table" style="width:70%; {{arrondi|10px}}; border:5px solid #bedc90; background:#bedc90; margin-bottom:4px;">
<caption style="font-size:250%; margin-bottom:8px; text-align:center; color:#6aa473">'''Un titre'''</caption>
<tr><td style="width:70%">
<div style="{{arrondi|8px}}; border:solid 2px #6aa473; background:white; padding:5px;">
<div style="font-size:150%; text-align:center;">'''Un sous-titre pour cette case'''</div>
Et un texte juste en dessous, qui peut être agrémenté avec tout ce que vous voulez (blabla, images, liens, etc.)
</div>
</td>
<td style="width:30%">
<div style="{{arrondi|8px}}; border:solid 2px #6aa473; background:#ddf0e9; padding:5px;">
Pour distinguer cette case, j'y ai appliqué un fond très clair pour que la lecture reste facile.
</div>
</td></tr>
</table>

Les couleurs utilisées sont :
* pour le fond d'ensemble > <span style="background:#bedc90">#bedc90</span>
* pour le grand titre et les bordures > <span style="color:white; background:#6aa473">#6aa473</span>
* pour le fond de la deuxième case > <span style="background:#ddf0e9">#ddf0e9</span> (un turquoise très pâle)

Comme vu auparavant avec Airmure, rien n'empêche d'exploiter le rose de Libégon, mais faites attention à ne pas abuser et à choisir une teinte qui soit assortie au vert en fond.

===Violet / Ectoplasma===
Une nouvelle et dernière couleur piège : le violet. S'il est mal dosé, il peut donner des résultat assez catastrophiques. Veillez à l'utiliser de manière considérée, avec des teintes sombres, claires ou pastel, pour éviter l'explosion visuelle tant redoutée.

Le sprite :
[[Fichier:Sprite 0094 NB.png]]

Ce qu'on peut faire avec :
<table class="table" style="width:70%; {{arrondi|10px}}; border:5px solid #cbafd1; background:#cbafd1; margin-bottom:4px;">
<caption style="font-size:250%; margin-bottom:8px; text-align:center; color:#7b62a4">'''Un titre'''</caption>
<tr><td style="width:70%">
<div style="{{arrondi|8px}}; border:solid 2px #7b62a4; background:white; padding:5px;">
<div style="font-size:150%; text-align:center;">'''Un sous-titre pour cette case'''</div>
Et un texte juste en dessous, qui peut être agrémenté avec tout ce que vous voulez (blabla, images, liens, etc.)
</div>
</td>
<td style="width:30%">
<div style="{{arrondi|8px}}; border:solid 2px #7b62a4; background:#dfd9f1; padding:5px;">
Pour distinguer cette case, j'y ai appliqué un fond très clair pour que la lecture reste facile.
</div>
</td></tr>
</table>

Les couleurs utilisées sont :
* pour le fond d'ensemble > <span style="background:#cbafd1">#cbafd1</span>
* pour le grand titre et les bordures > <span style="color:white; background:#7b62a4">#7b62a4</span>
* pour le fond de la deuxième case > <span style="background:#dfd9f1">#dfd9f1</span>

Encore une fois, le violet basique (#660099) est trop puissant pour être agréable lorsqu'il est très répandu sur la page.

==Conclusion==
Faîtes des essais, des tâtonnements, des expériences... Tout ce que j'ai dit ici reflète mes goûts personnels, mais vous pouvez également choisir de partir dans une direction différente !

Rappelez-vous qu'il faut toujours essayer d'obtenir quelque chose qui ne soit pas agressif. Il serait dommage qu'un lecteur du site face une crise d’épilepsie à cause de couleurs trop violentes. C'est votre page, bien entendu, mais il est tout de même préférable qu'elle soit agréable à visionner, si vous souhaitez qu'elle soit consultée ;).