mermaid.md

@@ -68,6 +68,7 @@ flowchart LR
     classDef someclass fill:#f96;
 ```
 
+#### mots clefs pour définir des styles
 :key: Les mots clefs pour les styles sont : 
 - classDef : définit le style pour une classe `classDef green fill:#9f6,stroke:#333,stroke-width:2px`
 - class: affecte une classe à des id `class sq,e green`
@@ -76,28 +77,35 @@ flowchart LR
 - linkstyle i : définit un style  pour le lien numéro i (de 0 à N)
 - linkstyle i,j,k : définit un style  pour les liens numéro i,j,k :warning: pas d'espace entre les chiffres et les virgules
 
-:rainbow: Les couleurs peuvent être nommées  ou définies en hexa à 3 chiffres, `#rvb`, qui correspondent à `#rrvvbb` sur 6.
-Pour tester, on peut utiliser :
-- la syntaxe LateX/kateX ( [voir la doc](https://katex.org/docs/supported.html#style-color-size-and-font))
+#### code des couleurs : couleurs nommées et hexa sur 3 'chiffres', et astuces pour les visualiser
+:rainbow: Les couleurs peuvent être nommées  ou définies en hexadécimal sur 3 chiffres, en anglais red/green/blue (rgb) et en français rouge/vert/bleu (rvb). Le code `#rvb` correspond à `#rrvvbb` codé  sur 6.
+Les 16 "chiffres" de la base hexadécimale vont de 0 à f.
 
-```
-$`\textcolor{green}{ \text{textcolor "green" dans une syntaxe LateX}}`$ 
-```
-$`\textcolor{green}{ \text{textcolor "green" dans une syntaxe LateX}}`$ ;
-```
-$`\textcolor{#00ff00} {\sharp 00ff00}`$ 
-```
-$`\textcolor{#00ff00} {\sharp 00ff00}`$ 
+##### Présentation du code à l'aide de "colorchips"
+Sur une page en markdown "gitlab", les ["colorchips"](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#colors) permettent de présenter ou tester des couleurs, selon plusieurs formats, dont hexa à 3 et 6 chiffres.
 
-- les ["colorchips"](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#colors), qui acceptent plusieurs format de couleur dont hexa à 3 et 6 chiffres
-  -  `#000000` , `#000`, `#222`, `#444`, `#666`, `#888`, `#aaa`, `#ccc`, `#eee`
+Utilisons-les ici pour présenter le principe du code :
+- noir, et dégradés de gris : trois chiffres identiques 
+    - noir = `#000000` = `#000` = noir, 
+    - dégradés de gris : `#000`, `#222`, `#444`, `#666`, `#888`, `#aaa`, `#ccc`, `#eee`
+- couleurs Rouge, Verte et  Bleue = `#F00`,  `#0f0`,  `#00f`, avec dégradés
   -  `#FF0000` , `#F00`, `#F22`, `#F44`, `#F66`, `#F88`, `#Faa`, `#Fcc`
   -  `#00ff00` , `#0f0`, `#2F2`, `#4F4`, `#6F6`, `#8F8`, `#aFa`, `#cFc`
   -  `#0000ff` , `#00f`, `#22F`, `#44F`, `#66F`, `#88F`, `#aaF`, `#ccF`
 
-- l'éditeur mermaid en ligne, https://mermaid-js.github.io/mermaid-live-editor/ .
+- couleurs complémentaires à Rouge, Vert et Bleu = `#0FF`,  `#F0F`,  `#FF0`
+
+- variations sur deux axes, motif xvx:
+-  `#020` , `#222` , `#424` , `#828` ,  `#a2a` ,  `#c2c`, `#e2e`
+-  `#040` , `#242` , `#444` , `#848` ,  `#a4a` ,  `#c4c`, `#e4e`
+-  `#060` , `#262` , `#464` , `#868` ,  `#a6a` ,  `#c6c`, `#e6e`
+-  `#080` , `#282` , `#484` , `#888` ,  `#a8a` ,  `#c8c`, `#e8e`
+-  `#0a0` , `#2a2` , `#4a4` , `#8a8` ,  `#aaa` ,  `#cac`, `#eae`
+-  `#0c0` , `#2c2` , `#4c4` , `#8c8` ,  `#aca` ,  `#ccc`, `#ece`
+-  `#0e0` , `#2e2` , `#4e4` , `#8e8` ,  `#aea` ,  `#cec`, `#eee`
+-  `#0f0` , `#2f2` , `#4f4` , `#8f8` ,  `#afa` ,  `#cfc`, `#efe`
 
-#### Palettes en hexa
+#### Exemple de colorchips 
   -  `#080` , `#282` , `#484` , `#888` ,  `#a8a` ,  `#c8c`, `#e8e`
   -  `#5fc` ,  `#5ef`, `#58a`
   -  `#66f` , `#6f6` 
@@ -106,13 +114,36 @@ $`\textcolor{#00ff00} {\sharp 00ff00}`$
   -  `#c97` , `#c55` ,`#c5c`
   -  `#ff1`, `#f0d` , `#fcc`, `#fa0`, `#f88` , `#f66` , `#f96`
 
+
+##### Autres astuces pour trouver des palettes ou tester une couleur
+
+- un site ou un logiciel extérieur, par exemple **Inkscape** ou **LibreOffice Writer**, qui propose une palette dans laquelle on peut choisir une couleur et qui indique son code dans un ou plusieurs formats.
+
+![Capture_d_écran_ColorPickerWriter](uploads/fe1ea6dacc7d5b2c54455a54de6dabc5/Capture_d_écran_ColorPickerWriter.png)
+
+- l'éditeur mermaid, soit en ligne, https://mermaid-js.github.io/mermaid-live-editor/ soit dans une page markdown.
 ```mermaid
 flowchart LR
-    id1(Start)-->id2(Stop)
+   id1("fill:#f9f,stroke:#333")-->id2("fill:#bbf,stroke:#f66",color:#fff")
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 
+
+##### comparaison avec LateX/kateX (hexa codé sur 6)
+La syntaxe LateX/kateX utilise du hexa sur 6 caractères, et aussi des couleurs nommées ( [voir la doc](https://katex.org/docs/supported.html#style-color-size-and-font)).
+On rappelle que la couleur `#rvb` codée sur 3 caractères correspond à `#rrvvbb` codé sur 6.
+
+```
+$`\textcolor{green}{ \text{textcolor "green" dans une syntaxe LateX}}`$ 
+```
+$`\textcolor{green}{ \text{textcolor "green" dans une syntaxe LateX}}`$ ;
+```
+$`\textcolor{#00ff00} {\sharp 00ff00}`$ 
+```
+$`\textcolor{#00ff00} {\sharp 00ff00}`$ 
+
+
 ### Subgraphs de flowcharts
 Les subgraphs de flowcharts doivent avoir un ID et/ou un titre