diff options
| -rw-r--r-- | content/Informatique/colors.rst | 217 | ||||
| -rw-r--r-- | content/images/Capture-terminal.png | bin | 0 -> 17891 bytes | |||
| -rw-r--r-- | content/images/palette_150.jpg | bin | 0 -> 8510 bytes | |||
| -rw-r--r-- | content/images/palette_75.jpg | bin | 0 -> 3950 bytes | |||
| -rw-r--r-- | content/resources/colors.py | 56 |
5 files changed, 273 insertions, 0 deletions
diff --git a/content/Informatique/colors.rst b/content/Informatique/colors.rst new file mode 100644 index 0000000..c1e4929 --- /dev/null +++ b/content/Informatique/colors.rst @@ -0,0 +1,217 @@ +.. -*- mode: rst -*- +.. -*- coding: utf-8 -*- + +============================================== +Se créer un thème de couleur dans son terminal +============================================== + +:date: 2014-05-18 +:tags: libre, DIY +:logo: /images/palette_75.jpg +:summary: + Quand on utilise un terminal tous les jours, on a envie de l'adapter en + fonction de ses goûts. Il existe beaucoup de thèmes disponibles sur le net + qui permettent de le configurer à sa guise, mais rien qui n'explique + comment en créer un nouveau. + +.. figure:: {filename}/images/palette_150.jpg + :figwidth: 150 + :figclass: floatleft + :alt: Palette + + Image : `Hafsa Nabeel`_ (creativecommons_) + +.. _Hafsa Nabeel: https://www.flickr.com/photos/hafsacreations/3241957057/ +.. _creativecommons: http://creativecommons.org/licenses/by-nc-nd/2.0/ + +Il est assez facile de se créer un thème de couleur pour son terminal. La +plupart du temps on trouve des thèmes à copier qui contiennent la liste des +couleurs à utiliser, mais il est rarement expliqué comment faire pour en créer +un nouveau. C'est pourtant assez simple une fois que l'on a compris les bases. + +Les bases +========= + +La plupart des terminaux peuvent afficher 256 couleurs ou plus, mais le shell +n'a besoin que de six couleurs de base (auxquelles viennent s'ajouter le blanc +et le noir que je ne traite pas ici). Il s'agit des trois couleurs primaires, +et les trois couleurs secondaires, que l'on peut représenter la palette sous +forme de tableau (dans l'ordre d'index utilisé dans un terminal) : + +.. raw:: html + + <table cellspacing="2" cellpadding="3" border="1"> + <tbody> + <tr> + <th scope="row">Couleur</th> + <td width="15%">Rouge</td> + <td width="15%">Vert</td> + <td width="15%">Jaune</td> + <td width="15%">Bleu</td> + <td width="15%">Magenta</td> + <td width="15%">Cyan</td> + </tr> + <tr> + <th scope="row">Clair</th> + <td bgcolor="Red"></td> + <td bgcolor=#00FF00></td> + <td bgcolor="Yellow"></td> + <td bgcolor="Blue"></td> + <td bgcolor="Fuchsia"></td> + <td bgcolor="Aqua"></td> + </tr> + <tr> + <th scope="row">Sombre</th> + <td bgcolor=#800000></td> + <td bgcolor=#008000></td> + <td bgcolor=#808000></td> + <td bgcolor=#000080></td> + <td bgcolor=#800080></td> + <td bgcolor=#008080></td> + </tr> + </tbody></table> + +Cette représentation sous forme de tableau présente l'avantage de montrer deux +caractéristiques : le nombre de couleurs de base est limité, et la variante +sombre ou claire consiste juste à changer la luminosité. + +Construire le thème +=================== + +Nous allons créer deux thèmes : un clair et un sombre. + + +Pour faire un thème homogène, il va falloir respecter deux règles : + +- Chaque couleur devra avoir la même luminosité que les autres couleurs + du thème : il ne faut pas qu'une couleur éclate davantage que les autres. +- Chaque couleur devra occuper le même espace [#]_ dans le cercle + colorimétrique : il ne faut pas que deux couleurs semblent proches au point + de les confondre. + +Pour respecter ces deux contraintes, nous allons être obligé de construire +notre thème via une application, qui sera plus à même que nous de respecter ces +deux contraintes. + +La représentation des couleurs +============================== + +Il existe plusieurs manières de représenter les couleurs en informatique, la +plus connue est la `représentation RGB`_, mais celle-ci n'est pas très pratique +dans notre cas d'utilisation : en effet il n'est pas possible en utilisant +cette représentation de passer facilement de la teinte claire à sombre. Nous +allons nous intéresser ici à la représentation `Teinte/Saturation/Valeur`_ qui +présente l'avantage de séparer la teinte d'une couleur de sa luminosité. + +Selon la codification TSL, chaque teinte de couleur est séparée de 60°. Il +faudra donc conserver cet écart dans notre thème final. Par contre nous avons +la possibilité d'appliquer une rotation du cercle pour faire varier la teinte +des couleurs, c'est ce qui donnera les couleurs de notre thème. Il ne nous +reste plus qu'à définir les valeurs de saturation/valeur pour le thème clair et +le thème sombre. + +Après tout le reste n'est que conversion d'un système de représentation à un +autre, ce qui peut se faire tout seul avec un petit script. + + +Le résultat +=========== + +Le script est écrit en python et peut être `téléchargé ici`_, il reçoit 5 +paramètres, et écrit sur la sortie la configuration pouvant être utilisée avec +`rxvt` et `xterm`, deux émulateurs de terminaux permettant un bon niveau de +configuration. + + +.. _téléchargé ici: {filename}/resources/colors.py + +.. list-table:: + :header-rows: 1 + + * - décalage + - saturation claire + - saturation sombre + - valeur claire + - valeur sombre + * - 30 + - 60 + - 50 + - 90 + - 70 + +Ce qui donnera l'exécution suivante : + +.. code-block:: bash + + $ python colors.py 30 60 50 90 70 + +Il est possible de modifier les couleurs sans enregistrer le paramétrage +définitivement en passant la sortie du script à `xrdb` avant d'ouvrir un +nouveau terminal : + +.. code-block:: bash + + $ python colors.py 30 60 50 90 70 | xrdb -override + +Si vous voulez appliquer ce paramétrage définitement, il faut l'enregistrer +dans le fichier `~/.Xdefaults` + +Le résulat des couleurs générées avec les valeurs définies ci-dessus : + +.. raw:: html + + <table cellspacing="2" cellpadding="3" border="1"> + <tbody> + <tr> + <th scope="row">Couleur</th> + <td width="15%">Rouge</td> + <td width="15%">Vert</td> + <td width="15%">Jaune</td> + <td width="15%">Bleu</td> + <td width="15%">Magenta</td> + <td width="15%">Cyan</td> + </tr> + <tr> + <th scope="row">Clair</th> + <td bgcolor=#e6175c></td> + <td bgcolor=#a1e65c></td> + <td bgcolor=#e6a15c></td> + <td bgcolor=#5ca1e6></td> + <td bgcolor=#a15ce6></td> + <td bgcolor=#5ce6a1></td> + </tr> + <tr> + <th scope="row">Sombre</th> + <td bgcolor=#b32c59></td> + <td bgcolor=#86b359></td> + <td bgcolor=#b38659></td> + <td bgcolor=#5986b3></td> + <td bgcolor=#8659b3></td> + <td bgcolor=#59b386></td> + </tr> + </tbody></table> + +Et voilà ce que ça donne en réeel : des couleurs plutôt douces et claires qui +n'agressent pas les yeux ^^ + +.. image:: {filename}/images/Capture-terminal.png + :class: center + :alt: caputre d'écran + +Vous pouvez à votre tour essayer d'autres combinaisons pour vous créer votre +propre palette à utiliser dans votre terminal. + + +.. _représentation RGB: https://fr.wikipedia.org/wiki/Rouge_vert_bleu +.. _Teinte/Saturation/Valeur: https://fr.wikipedia.org/wiki/Teinte_Saturation_Valeur + +.. [#] + + On peut concevoir l'ensembre des couleurs comme un système, c'est-à-dire un + ensemble d'éléments interdépendants les uns des autres : l'espace occupé + par un élément correspond à l'espace qui n'est pas pris par l'ensemble des + autres éléments. + + Comme les six couleurs de base sont uniformément réparties dans le cercle + colorimétrique, il faut que notre thème final conserve cette répartition. + diff --git a/content/images/Capture-terminal.png b/content/images/Capture-terminal.png Binary files differnew file mode 100644 index 0000000..b66dcc0 --- /dev/null +++ b/content/images/Capture-terminal.png diff --git a/content/images/palette_150.jpg b/content/images/palette_150.jpg Binary files differnew file mode 100644 index 0000000..90b4151 --- /dev/null +++ b/content/images/palette_150.jpg diff --git a/content/images/palette_75.jpg b/content/images/palette_75.jpg Binary files differnew file mode 100644 index 0000000..0abda80 --- /dev/null +++ b/content/images/palette_75.jpg diff --git a/content/resources/colors.py b/content/resources/colors.py new file mode 100644 index 0000000..25ade58 --- /dev/null +++ b/content/resources/colors.py @@ -0,0 +1,56 @@ +#!/usr/bin/env python +# -*- coding: utf-8 -*- + +import sys +import colorsys + +def define(saturation, value): + + def showColor(hue): + return colorsys.hsv_to_rgb(hue, saturation, value) + + return showColor + +def showColor(theme, hue): + + r, g, b = theme(hue / 360.) + return "#%02x%02x%02x" % (int(r*256), int(g*256), int(b*256)) + +if __name__ == "__main__": + + if len(sys.argv) < 5: + print "Usage :" + print "color.py SHIFT LIGHT_SATURATION DARK_SATURATION LIGHT_VALUE DARK_VALUE" + sys.exit(1) + + shift = int(sys.argv[1]) + light_s = int(sys.argv[2])/100. + dark_s = int(sys.argv[3])/100. + light_v = int(sys.argv[4])/100. + dark_v = int(sys.argv[5])/100. + + colors = { + + 1 : 0, # red + 3 : 60, # yellow + 2 : 120, # green + 6 : 180, # cyan + 4 : 240, # blue + 5 : 300, # magenta + + } + + dark_theme = define(dark_s, dark_v) + light_theme = define(light_s, light_v) + for (name, value) in colors.iteritems(): + + dark = showColor(dark_theme, value - shift) + light = showColor(light_theme, value - shift) + + print "urxvt.color%d : %s" % (name, dark) + print "urxvt.color%d : %s" % (name+8, light) + + print "XTerm*color%d : %s" % (name, dark) + print "XTerm*color%d : %s" % (name+8, light) + + |
