Couleurs

Exercice 1: sélection de couleur

Les couleurs web-safe correspondent à un échantillon simplifié des couleurs caractérisables par le modèle RGB. Les coordonnées RGB d'une couleur web-safe peuvent avoir seulement 6 valeurs. Ces valeurs sont en décimal (respectivement en hexadécimal): 0 (00), 51(33), 102(66), 153(99), 204(CC), 255(FF).

• Ecrire une fonction javascript qui affiche dans la même page web toutes les couleurs web-safe.
  • chaque couleur est représentée par un div qui affiche la couleur et son code rgb comme dans l'image ci-contre.
  • en travaillant un peu la css vous obtiendrez l'affichage suivant.
    
• Faire une mise en page "plastique", aussi appelée "responsive" pour obtenir cet affichage lorsque la taille de l'écran est en dessous de 480px
  • si vous n'êtes pas encore familier avec les "media" css3 vous pouvez partir de
    • un aperçu rapide des aspects techniques du "responsive design" ici
    • la spec du W3C
    • un exemple d'utilisation très proche de l'exercice.

Exercice 2: génération d'une palette de couleur

• Afficher sous la forme d'un nuancier un sous ensemble de couleurs comme dans l'image ci-contre, partie gauche.
• Ecrire le gestionnaire d'évènements qui permet de sélectionner deux couleurs par simple clic sur le nuancier.
• Ecrire la fonction javascript qui permet de générer une palette de n couleurs selon un principe d'interpolation linéaire entre les composantes r, v, b des deux couleurs c1 et c2.
• Ecrire une fonction qui prend les mêmes paramètres et le même principe d'interpolation mais qui interpole uniquement les teintes en gardant invariante la brillance et la saturation en la fixant par exemple à la moyenne des deux couleurs données en paramètres
• Calcul des contrastes
• Le W3C donne des calculs simples des contrastes de brillance et des contrastes de couleur ainsi que les seuils à respecter pour assurer la lisibilité d'un texte écrit dans une couleur sur un fond d'une autre couleur. A partir de ces calculs et des palettes générées, afficher la matrice des contrastes pour chaque paire de couleur de la palette générée.

Exercice 3: construction interactive d'une palette à partir d'une image

NB: Pour cet exercice, vous pourrez partir de ce tutorial

• A partir d'une image affichée dans le canvas, écrire un gestionnaire d'évènement qui affiche dans une zone définie la couleur de l'image sous le pointeur, à la manière d'une pipette.

• Ecrire le code javascript utile pour qu'il soit possible en cliquant sur un point de l'image de sauvegarder la couleur de l'image dans une liste de couleur et de créer ainsi interactivement une palette de couleur à partir d'une sélection de couleur dans l'image.

Exercice 4: coloration d'un tableau de données

• Ecrire une fonction javascript qui modifie la couleur des cellules du tableau de sorte à faire ressortir le min, le max et la médiane des valeurs de chaque colonne.
• Ecrire une fonction javascript qui modifie la couleur des cellules du tableau en fonction de la valeur des cellules en utilisant une palette de couleurs inspirée des palettes de couleur de Brewer présentées en cours.