javascript - application rgb, rgba, hsl, hsla

Commentaires

Transcription

javascript - application rgb, rgba, hsl, hsla
-------Couleurs HTML / JavaScript
(Programmation Internet pour débutants)
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
[email protected]
Il y a plusieurs façons de spécifier une couleur en HTML (je dis bien
HTML, pas JavaScript) :
1. « #HexHexHexHexHexHex » ou « #HexHexHex » ;
2. « rgb ( Red , Green , Blue ) » en décimales:
3. « rgba ( Redmax256 , Greenmax256 , Bluemax256 , alpha% ) » en
décimales:
4. « hsl » : Hue (0-360) , Saturation (0-100) % , Luminosity (0-100) %
5. « hsls » : Hue (0-360) , Saturation (0-100) % , Luminosity (0-100) % ,
Alpha (0-1).
6. Directement le nom de la couleur : red, green, blue, cyan,
Remarque :
« rgb », « rgba », « hsl », « hsla » ne fonctionnent qu’en HTML, et pas
directement en JavaScript.
Voici un programme qui utilise ces commandes en JavaScript, mais en fait
par le truchement du HTML.
J’utilise ce petit jeu quand je dois me détendre rapidement l’esprit en faisant
quelque chose pour ne rien faire, je rafraîchis continuellement la page
jusqu’à ce que tous les écrits soient bien lisibles, et toutes les couleurs
uniques.
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-II
<style>
.pad {padding:10 0}
</style>
<table style="width:450" rules="all"><tr><td>
<div style="width:250;font-family:consolas"
id="outp"></div>
</td><td>
<table style="text-align:center;color:yellow">
<tr>
<td id="dispr" style="width:33%;fontweight:900"></td>
<td id="dispg" style="width:33%;fontweight:900"></td>
<td id="dispb" style="width:33%;fontweight:900"></td>
</tr>
<tr>
<td colspan="3">
<div style="width:200;height:90" id="disp"></div>
</td>
</tr>
</table>
</td></tr></table>
<script> "use strict";
let red,green,blue;
let rgb = _ => {
red = Math.round(Math.random()*255),
green = Math.round(Math.random()*255),
blue = Math.round(Math.random()*255);
return {red,green,blue};
}
let htmlCol = _ => {
const v = [
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'A', 'B', 'C', 'D', 'E', 'F'
];
let col = "#";
for (let k = 0; k < 6; k++)
col += v[Math.round(Math.random() * 15)];
return col;
Palettes couleurs Hexa
- 2 / 15 - jeudi, 4. avril 2019 (10:46 )
J.D.B. DIASOLUKA Nz. Luyalu
};
JavaScript Tome-II
let dispbckg = _ => {
let outp = document.getElementById("outp");
let col = htmlCol();
outp.innerHTML += col;
red = `0x${col.substr(1, 2)}`,
green = `0x${col.substring(3, 5)}`,
blue = `0x${col.substr(5, 2)}`;
outp.innerHTML +=
`<div style="font-family:'consolas'">`;
outp.innerHTML +=
`<br>${"RED".padEnd(7, ".")} =
${red} = ${eval(red)} , `;
outp.innerHTML +=
`<br>${"GREEN".padEnd(7, ".")} =
${green} = ${eval(green)} , `;
outp.innerHTML +=
`<br>${"BLUE".padEnd(7, ".")} =
${blue} = ${eval(blue)}`;
outp.innerHTML += `</div>`;
document.getElementById("disp")
.style.backgroundColor = col;
red = `${col.substr(1, 2)}`,
green = `${col.substring(3, 5)}`,
blue = `${col.substr(5, 2)}`;
document.getElementById("dispr")
.style.backgroundColor = "#"+red+"0000";
document.getElementById("dispr")
.innerHTML = red;
document.getElementById("dispg")
.style.backgroundColor = "#00"+green+"00";
document.getElementById("dispg")
.innerHTML = green;
document.getElementById("dispb")
.style.backgroundColor = "#0000"+blue;
document.getElementById("dispb")
Palettes couleurs Hexa
- 3 / 15 - jeudi, 4. avril 2019 (10:46 )
J.D.B. DIASOLUKA Nz. Luyalu
.innerHTML = blue;
};
JavaScript Tome-II
dispbckg();
/*RGB*/
let s="",br,bg,bb,ba,cr,cg,cb,ca;
br=Math.round(Math.random()*255),
bg=Math.round(Math.random()*255),
bb=Math.round(Math.random()*255),
cr=Math.round(Math.random()*255),
cg=Math.round(Math.random()*255),
cb=Math.round(Math.random()*255);
s+=`<fieldset style="font-weight:900;`+
`font-size:15pt;text-align:center">`;
s+=`<div class='rgb1 pad' style='border:solid 3mm;`+
`background:rgb(${br} , ${bg} , ${bb});`+
`color:rgb(${cr} , ${cg} , ${cb})'>BACKGROUND RGB 1`+
`<br>rgb(${br} , ${bg} , ${bb})</div>`;
s+=`<div class="rgb2 pad" style='`+
`color:rgb(${br},${bg},${bb});`+
`background:rgb(${cr},${cg},${cb})'>FOREGROUND RGB 2`+
`<br>rgb(${cr} , ${cg} , ${cb})</div>`;
/*RGBA*/
br=Math.round(Math.random()*255),
bg=Math.round(Math.random()*255),
bb=Math.round(Math.random()*255),
ba=Math.random(),
cr=Math.round(Math.random()*255),
cg=Math.round(Math.random()*255),
cb=Math.round(Math.random()*255),
ca=Math.random();
s+=`<fieldset style="font-weight:900;`+
`font-size:15pt;text-align:center">`;
s+=`<div class="rgba1 pad" style='margin-top:2.5px;`+
Palettes couleurs Hexa
- 4 / 15 - jeudi, 4. avril 2019 (10:46 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-II
`color:rgba(${cr},${cg},${cb},${ca});`+
`background:rgba(${br},${bg},${bb},${ba})'>`+
`BACKGROUND RGBA 2<br>`+
`rgba(${br} , ${bg} , ${bb} , ${ba.toFixed(2)})`+
`</div>`+
`<div class="rgba2 pad" style='background:`+
`rgba(${cr},${cg},${cb},${ca});color:`+
`rgba(${br},${bg},${bb},${ba})'>`+
`FOREGROUND RGBA 2<br>`+
`rgba(${cr} , ${cg} , ${cb} , ${ca.toFixed(2)})`+
`</div>`;
/*HSL*/
let bh,bs,bl,bA,ch,cs,cl,cA;
bh=Math.round(Math.random()*360),
bs=Math.round(Math.random()*100),
bl=Math.round(Math.random()*100);
ch=Math.round(Math.random()*360),
cs=Math.round(Math.random()*100),
cl=Math.round(Math.random()*100);
s+=`<div class='hsl1 pad' style=`+
`'margin-top:5px;border:solid 3mm;`+
`background:hsl(${bh},${bs}%,${bl}%);`+
`color:hsl(${ch},${cs}%,${cl}%)'>`+
`BACKGROUND HSL 1<br>`+
`hsl(${bh} , ${bs}% , ${bl}%)</div>`+
`<div class='hsl2 pad' style='`+
`background:hsl(${ch},${cs}%,${cl}%);`+
`color:hsl(${bh},${bs}%,${bl}%)'>`+
`FOREGROUND HSL 2`+
`<br>hsl(${ch} , ${cs}% , ${cl}%)</div>`;
/*HSLA*/
bh=Math.round(Math.random()*360),
bl=Math.round(Math.random()*100);
bs=Math.round(Math.random()*100),
bA=Math.random(),
ch=Math.round(Math.random()*360),
cl=Math.round(Math.random()*100),
Palettes couleurs Hexa
- 5 / 15 - jeudi, 4. avril 2019 (10:46 )
J.D.B. DIASOLUKA Nz. Luyalu
cs=Math.round(Math.random()*100),
cA=Math.random();
JavaScript Tome-II
s+=`<div class='hsla1 pad' style=`+
`'margin-top:5px;border:solid 3mm;background:`+
`hsla(${bh},${bs}%,${bl}%,${bA.toFixed(2)});`+
`color:hsla(${ch},${cs}%,${cl}%,`+
`${cA.toFixed(2)})'>BACKGROUND HSLA 1<br>`+
`hsla(${bh} , ${bs}% , ${bl}% , ${bA.toFixed(2)})`+
`</div>`+
`<div class='hsla2 pad' style='background:`+
`hsla(${ch},${cs}%,${cl}%,${cA.toFixed(2)});`+
`color:hsla(${bh},${bs}%,${bl}%,`+
`${bA.toFixed(2)})'>FOREGROUND HSLA 2`+
`<br>hsla(${ch} , ${cs}% , ${cl}% , `+
`${cA.toFixed(2)})</div>`;
`</fieldset>`;
document.write(s);
</script>
Une des exécutions :
Palettes couleurs Hexa
- 6 / 15 - jeudi, 4. avril 2019 (10:46 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-II
Une autre exécution :
Palettes couleurs Hexa
- 7 / 15 - jeudi, 4. avril 2019 (10:46 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-II
Une troisième exécution :
Palettes couleurs Hexa
- 8 / 15 - jeudi, 4. avril 2019 (10:46 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-II
Une quatrième exécution :
Palettes couleurs Hexa
- 9 / 15 - jeudi, 4. avril 2019 (10:46 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-II
Une cinquième exécution :
Palettes couleurs Hexa
- 10 / 15 - jeudi, 4. avril 2019 (10:46 )
J.D.B. DIASOLUKA Nz. Luyalu
Palettes couleurs Hexa
JavaScript Tome-II
- 11 / 15 - jeudi, 4. avril 2019 (10:46 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-II
Kinshasa, le jeudi 4 avril 2019 - 10:46:57 PM
Mots-clés :
rgb, rgba, hsl. hsla, couleurs, HTML, JavaScript, Internet, Application, couleur, Alpha, Saturation, Luminosité, Luminosity,
background, foreground, color
Palettes couleurs Hexa
- 12 / 15 - jeudi, 4. avril 2019 (10:46 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-II
DIASOLUKA Nz. Luyalu
Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Études humanités : Scientifique - Mathématiques & Physique.
Informaticien-amateur, Programmeur et WebMaster.
Chercheur indépendant, autonome et autofinancé, bénévole, sans
aucun conflit d’intérêt ou liens d'intérêts ou contrainte
promotionnelle avec qui qu’il soit ou quelqu’organisme ou
institution / organisation que ce soit, étatique, paraétatique ou
privé, industriel ou commercial en relation avec le sujet présenté.
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818
[email protected]
Autre Lecture :
https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-LaCreation
D’autres publications pouvant aussi intéresser :
• https://www.scribd.com/document/377036251/Le-DosageDes-Medicaments-en-Cac-Cas
• https://www.scribd.com/document/377035454/Le-HasardDes-Thermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/PetiteIntroduction-Aux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-enPalettes couleurs Hexa
- 13 / 15 - jeudi, 4. avril 2019 (10:46 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-II
Jesus-Christ-Pour-Quoi-Faire
• https://www.scribd.com/document/375689778/Lacuitevisuelle-angulaire
• https://www.scribd.com/document/375349851/La-variableThis
• https://www.scribd.com/document/375024162/FonctionsImbriquees-en-JS
• https://www.scribd.com/document/374789297/FormatInterne-Des-Objets-JavaScript
• https://www.scribd.com/document/374788758/Iterations-enJavaScript
• https://www.scribd.com/document/374738470/Le-PlusGrand-Secret-de-La-Creation
• https://www.scribd.com/document/374597969/NouvelleFormule-d-IMC-indice-de-doduite-Selon-Dr-Diasoluka
• https://www.scribd.com/document/373847209/PropertyDescriptors
• https://www.scribd.com/document/373833282/l-ObjetGlobal-Window
• https://www.scribd.com/document/372665249/JavascriptTome-II
• https://www.scribd.com/document/355291488/motiliteoculaire-2
• https://www.scribd.com/document/355291239/motiliteoculaire-I
• https://www.scribd.com/document/355290248/Script-dAnalyses-Des-Reflexes-Pupillomoteurs
•
https://www.scribd.com/document/321168468/Renseignement
s-Id-et-Anthropometriques
• https://www.scribd.com/document/320856721/Emission-31Palettes couleurs Hexa
- 14 / 15 - jeudi, 4. avril 2019 (10:46 )
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-II
Jul-2016
•
https://www.scribd.com/document/318182982/ComplicationVisuelle-du-Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/RapportEntre-Oxymetrie-Et-Type-Respiration
•
https://www.scribd.com/document/315746265/ClassificationDes-Medicaments
•
https://www.scribd.com/document/315745909/IncongruencesHeresies-et-Heterodoxies-de-la-Notion-de-Laboratoire
• https://www.scribd.com/document/315745725/RapportEntre-Oxymetrie-Et-Type-Respiration
Palettes couleurs Hexa
- 15 / 15 - jeudi, 4. avril 2019 (10:46 )

Documents pareils