summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--content/Informatique/colors.rst217
-rw-r--r--content/images/Capture-terminal.pngbin0 -> 17891 bytes
-rw-r--r--content/images/palette_150.jpgbin0 -> 8510 bytes
-rw-r--r--content/images/palette_75.jpgbin0 -> 3950 bytes
-rw-r--r--content/resources/colors.py56
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
new file mode 100644
index 0000000..b66dcc0
--- /dev/null
+++ b/content/images/Capture-terminal.png
Binary files differ
diff --git a/content/images/palette_150.jpg b/content/images/palette_150.jpg
new file mode 100644
index 0000000..90b4151
--- /dev/null
+++ b/content/images/palette_150.jpg
Binary files differ
diff --git a/content/images/palette_75.jpg b/content/images/palette_75.jpg
new file mode 100644
index 0000000..0abda80
--- /dev/null
+++ b/content/images/palette_75.jpg
Binary files differ
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)
+
+