Voir la source de Codage des couleurs sur Scratch

{{Titre|Codage des couleurs sur Scratch}}

[[Langage Scratch|Scratch]] dispose de plusieurs '''encodage de couleurs''' possibles.
Les principaux sont le '''RGBA''', le '''Décimal''', le '''HEX''' et le '''HSLA'''.

== Système RGBA ==
Le système '''RGBA''' (en français Rouge Vert Bleu ou RVB) est un système de codage des couleurs. Il comporte quatre canaux, le rouge (R), le vert (G), le bleu (B) et l'alpha (A). Ces quatre canaux varier de 0 à 255, c'est à dire de 0% à 100%.

Le canal alpha (A), dédié à l'opacité d'une couleur, peut être omis, dans ce cas, l'opacité sera maximale.

Le tableau ci-dessous présente les seize couleurs de base ainsi que leur codage '''RGB''' (sans canal alpha) :
{| class="wikitable"
! scope=col | Valeur
! scope=col | Couleur
! scope=col | Valeur
! scope=col | Couleur
! scope=col | Valeur
! scope=col | Couleur
! scope=col | Valeur
! scope=col | Couleur
|-
|style="background:#0FF; color:#000; font-family:monospace;"| 0;255;255
|aqua / cyan <br> (bleu-vert eau)
|style="background:#008000; color:#FFF; font-family:monospace;"| 0;128;0
|green <br> (vert)
|style="background:#000080; color:#FFF; font-family:monospace;"| 0;0;128
|navy <br> (bleu marine)
|style="background:#C0C0C0; color:#000; font-family:monospace;"| 192;192;192
|silver <br> (argent)
|-
|style="background:#000; color:#FFF; font-family:monospace;"| 0;0;0
|black <br> (noir)
|style="background:#808080; color:#FFF; font-family:monospace;"| 128;128;128
|gray <br> (gris)
|style="background:#808000; color:#FFF; font-family:monospace;"| 128;128;0
|olive <br> (jaune olive)
|style="background:#008080; color:#fff; font-family:monospace;"| 0;128;128
|teal <br> (sarcelle)
|-
|style="background:#00F; color:#FFF; font-family:monospace;"| 0;0;255
|blue <br> (bleu)
|style="background:#0F0; color:#000; font-family:monospace;"| 0;255;00
|lime <br> (vert citron)
|style="background:#660099; color:#FFF; font-family:monospace;"| 128;0;128
|purple <br> (violet)
|style="background:#FFF; color:#000; font-family:monospace;"| 255;255;255
|white <br> (blanc)
|-
|style="background:#F0F; color:#000; font-family:monospace;"| 255;0;255
|fuchsia / magenta <br> (fuchsia)
|style="background:#800000; color:#FFF; font-family:monospace;"| 128;0;0
|maroon <br> (bordeaux)
|style="background:#F00; color:#FFF; font-family:monospace;"| 255;0;0
|red <br> (rouge)
|style="background:#FF0; color:#000; font-family:monospace;"| 255;255;0
|yellow <br> (jaune)
|}

=== Système décimal ===

Le '''système décimal''' est un système de numérotation en base 10 particulièrement utilisé sur Scratch. Il est basé sur le '''RGBA''', dont il tire les 3 canaux principaux (le canal alpha n'est pas supporté).

On calcule une couleur depuis ses canaux comme suivant : {{FloatClear}}

<code>b + 256 * (g + (256 * r))</code>

{{FloatClear}}

Le tableau ci-dessous présente les seize couleurs de base ainsi que leur codage '''décimal''' :
{| class="wikitable"
! scope=col | Valeur
! scope=col | Couleur
! scope=col | Valeur
! scope=col | Couleur
! scope=col | Valeur
! scope=col | Couleur
! scope=col | Valeur
! scope=col | Couleur
|-
|style="background:#0FF; color:#000; font-family:monospace;"| 65535
|aqua / cyan <br> (bleu-vert eau)
|style="background:#008000; color:#FFF; font-family:monospace;"| 32768
|green <br> (vert)
|style="background:#000080; color:#FFF; font-family:monospace;"| 128
|navy <br> (bleu marine)
|style="background:#C0C0C0; color:#000; font-family:monospace;"| 12632256
|silver <br> (argent)
|-
|style="background:#000; color:#FFF; font-family:monospace;"| 0
|black <br> (noir)
|style="background:#808080; color:#FFF; font-family:monospace;"| 8421504
|gray <br> (gris)
|style="background:#808000; color:#FFF; font-family:monospace;"| 8421376
|olive <br> (jaune olive)
|style="background:#008080; color:#fff; font-family:monospace;"| 32896
|teal <br> (sarcelle)
|-
|style="background:#00F; color:#FFF; font-family:monospace;"| 255
|blue <br> (bleu)
|style="background:#0F0; color:#000; font-family:monospace;"| 65280
|lime <br> (vert citron)
|style="background:#660099; color:#FFF; font-family:monospace;"| 8388736
|purple <br> (violet)
|style="background:#FFF; color:#000; font-family:monospace;"| 16777215
|white <br> (blanc)
|-
|style="background:#F0F; color:#000; font-family:monospace;"| 16711935
|fuchsia / magenta <br> (fuchsia)
|style="background:#800000; color:#FFF; font-family:monospace;"| 8388608
|maroon <br> (bordeaux)
|style="background:#F00; color:#FFF; font-family:monospace;"| 16711680
|red <br> (rouge)
|style="background:#FF0; color:#000; font-family:monospace;"| 16776960
|yellow <br> (jaune)
|}

=== Système hexadécimal ===
Le '''système hexadécimal''' est un système de numérotation en base 16 particulièrement utilisé en informatique. 

Il est basé sur le '''RGBA''', dont il tire les 4 canaux (Rouge, Vert, Bleu, Alpha).
Comme pour le '''RGBA''', le canal alpha peut être omis.

Il utilise 16 symboles : les chiffres 0 à 9, ainsi que les lettres de A à F (en majuscule ou en minuscule). Il est notamment utilisé pour coder les différentes couleurs utilisées par les ordinateurs et par les sites web. Le tableau ci-dessous présente les seize couleurs de base ainsi que leur codage '''hexadécimal''' :
{| class="wikitable"
! scope=col | Valeur
! scope=col | Couleur
! scope=col | Valeur
! scope=col | Couleur
! scope=col | Valeur
! scope=col | Couleur
! scope=col | Valeur
! scope=col | Couleur
|-
|style="background:#0FF; color:#000; font-family:monospace;"| #00FFFF
|aqua / cyan <br> (bleu-vert eau)
|style="background:#008000; color:#FFF; font-family:monospace;"| #008000
|green <br> (vert)
|style="background:#000080; color:#FFF; font-family:monospace;"| #000080
|navy <br> (bleu marine)
|style="background:#C0C0C0; color:#000; font-family:monospace;"| #C0C0C0
|silver <br> (argent)
|-
|style="background:#000; color:#FFF; font-family:monospace;"| #000000
|black <br> (noir)
|style="background:#808080; color:#FFF; font-family:monospace;"| #808080
|gray <br> (gris)
|style="background:#808000; color:#FFF; font-family:monospace;"| #808000
|olive <br> (jaune olive)
|style="background:#008080; color:#fff; font-family:monospace;"| #008080
|teal <br> (sarcelle)
|-
|style="background:#00F; color:#FFF; font-family:monospace;"| #0000FF
|blue <br> (bleu)
|style="background:#0F0; color:#000; font-family:monospace;"| #00FF00
|lime <br> (vert citron)
|style="background:#660099; color:#FFF; font-family:monospace;"| #800080
|purple <br> (violet)
|style="background:#FFF; color:#000; font-family:monospace;"| #FFFFFF
|white <br> (blanc)
|-
|style="background:#F0F; color:#000; font-family:monospace;"| #FF00FF
|fuchsia / magenta <br> (fuchsia)
|style="background:#800000; color:#FFF; font-family:monospace;"| #800000
|maroon <br> (bordeaux)
|style="background:#F00; color:#FFF; font-family:monospace;"| #FF0000
|red <br> (rouge)
|style="background:#FF0; color:#000; font-family:monospace;"| #FFFF00
|yellow <br> (jaune)
|}
{{Info| Vous pouvez trouvez une table complète des couleurs et de leur codage hexadécimal [https://www.rapidtables.org/fr/web/color/html-color-codes.html ici]}}

<div id="Système HVLA (HSVA)"></div>
== Système HSLA (HLVA) ==

Le '''Hue Saturation Lightness Alpha''' (en français « Teinte Saturation Luminosité ») est un système de codage des couleurs plus simple à comprendre pour un utilisateur humain, mais moins permissif en programmation.

Il comporte quatre canaux, le ''hue'' (H) (couleur), le ''saturation'' (G) (saturation, blanc), le ''lightness'' (B) (luminosité, noir) et l'''alpha'' (A) (alpha, opacité). Ces quatre canaux varient de 0% (0.00) à 100% (1.00). Avec ce système aussi, le canal alpha peut être omis, dans ce cas, l'opacité sera maximale.

On le retrouve dans le sélectionneur de couleur Scratch.

Le tableau ci-dessous présente les seize couleurs de base ainsi que leur codage '''HSL''' :

{| class="wikitable"
! scope=col | Valeur
! scope=col | Couleur
! scope=col | Valeur
! scope=col | Couleur
! scope=col | Valeur
! scope=col | Couleur
! scope=col | Valeur
! scope=col | Couleur
|-
|style="background:#0FF; color:#000; font-family:monospace;"| 50%;100%;50%
|aqua / cyan <br> (bleu-vert eau)
|style="background:#008000; color:#FFF; font-family:monospace;"| 33.3%;100%;25%
|green <br> (vert)
|style="background:#000080; color:#FFF; font-family:monospace;"| 66.7%;100%;25%
|navy <br> (bleu marine)
|style="background:#C0C0C0; color:#000; font-family:monospace;"| 0%;0%;75%
|silver <br> (argent)
|-
|style="background:#000; color:#FFF; font-family:monospace;"| 0%;0%;0%
|black <br> (noir)
|style="background:#808080; color:#FFF; font-family:monospace;"| 0%;0%;50%
|gray <br> (gris)
|style="background:#808000; color:#FFF; font-family:monospace;"| 16.7%;100%;25%
|olive <br> (jaune olive)
|style="background:#008080; color:#fff; font-family:monospace;"| 50%;100%;25%
|teal <br> (sarcelle)
|-
|style="background:#00F; color:#FFF; font-family:monospace;"| 	66.7%;100%;50%
|blue <br> (bleu)
|style="background:#0F0; color:#000; font-family:monospace;"| 33.3%;100%;50%
|lime <br> (vert citron)
|style="background:#660099; color:#FFF; font-family:monospace;"| 50%;100%;25%
|purple <br> (violet)
|style="background:#FFF; color:#000; font-family:monospace;"| 0%;0%;100%
|white <br> (blanc)
|-
|style="background:#F0F; color:#000; font-family:monospace;"| 83.3%;100%;50%
|fuchsia / magenta <br> (fuchsia)
|style="background:#800000; color:#FFF; font-family:monospace;"|0%;100%;25%
|maroon <br> (bordeaux)
|style="background:#F00; color:#FFF; font-family:monospace;"| 0%;100%;50%
|red <br> (rouge)
|style="background:#FF0; color:#000; font-family:monospace;"| 16.7%;100%;50%
|yellow <br> (jaune)
|}

{{LeSaviezVous|Dans certains cas, le canal ''hue'' peut être représenté par un angle.}}

== Voir aussi ==

[[Catégorie:Éditeur]]

{{Guide
|principal=[[Couleurs]]
|suivant=[[Gestion des couleurs sur Scratch]]
}}

<!-- Interwiki -->

[[en:Computer Colors]]
[[ja:コンピューターの色]]