La boîte à couleurs

Grâce à cette application vous pouvez déterminer une couleur et récupérer le code RGBA correspondant !

Déplacer les curseurs jusqu'à ce que vous ayez trouvé la bonne couleur

La couleur correspondante :

Le code RGBA de cette couleur :

A utiliser comme valeur de la propriété CSS background ou color !

Le code HTML et CSS

... <script src ="jquery.js"></script> <style> div {width : 200px ; height : 200px ; margin: 10px auto 10px auto ; border : 1px solid black ;} .etroit {display : inline-block ; margin :10px ; width :200px } </style> </head> <h1>Application "boîte à couleurs+" (version RGBA)</h1> <form> <p class ="remarque">Grâce à cette application vous pouvez choisir une couleur en observant le rendu et récupérer le code RGBA correspondant ! <h3>Déplacer les curseurs jusqu'à ce que vous ayez trouvé la bonne couleur</h3> <label>saisir intensité de rouge : </label><input type = 'range' min = '0' max = '255' step = '5' class ="curseur" /> <label>saisir intensité de vert : </label><input type = 'range' min = '0' max = '255' step = '5' class ="curseur"/> <label>saisir intensité de bleu : </label><input type = 'range' min = '0' max = '255' step = '5' class ="curseur" /> <label>saisir alpha : </label> <input type = 'range' min = '0' max = '1' step = '0.1' class ="curseur"/> <h3>La couleur correspondante : </h3> <div></div> <h3>Le code RGBA de cette couleur : </h3> <p>A utiliser comme valeur de la propriété CSS background ou color !</p> <input type ="text" readonly /> </form> ...

Attention programmation en JS jQuery donc il faut charger ce framework.
Il y a dans ce site un tuto sur le célèbre framework de JavaScript (dans le tutoriel "JavasScript").

Pour saisir les quatre paramètres d'un code RGBA emploi de quatre input type = range.
Ce nouveau type est implémenté sur tous les navigateurs récents.
Une boîte DIV pour afficher la couleur correspondant à la saisie.
Un input type = text en lecture seule pour afficher le code RGBA produit par les curseurs.

Le script

<script> $("input.curseur").change(function(){afficher_couleur();}); function afficher_couleur() { // couleur de fond de la boîte DIV var rouge = $("input:eq(0)").val(); var vert = $("input:eq(1)").val(); var bleu = $("input:eq(2)").val(); var alpha = $("input:eq(3)").val(); var couleur = 'rgba(' + rouge + ',' + vert + ',' + bleu +','+ alpha + ')'; $('div').css("background",couleur); // le code RGBA en détail $("input:text").val(couleur); } <script>

Le script :
Pour tout changement de l'un des curseurs (balises input de type range affectées de la classe curseur) appel de la fonction affichage_couleur().
Dans cette fonction on produit dans la variable couleur une chaîne correspondant au code RGBA choisi par l'utilisateur.
Cette chaîne devient la nouvelle valeur de la propriété background de la boîte DIV et le contenu du input type = text en lecture seule.
Retour menu