Introducció
Quan es fa una pàgina web o una aplicació web és habitual haver de canviar els colors dels elements. El browser visualitza tots els elements amb el fons de color blanc i color negre per a la lletra. Normalment aquests colors són canviats per colors més atreients o més acords amb la imatge de l'empresa.
CSS permet especificar el color d'una determinada propietat de tres formes diferents:
- Denominació del color (en anglès).
- Colors amb RGB (Vermell, Verd i Blau)
- Model HSL (Hue, Saturation, Lightness – Tonalitat, Saturació, Luminància)
El model RGB s'ha ampliat amb el model RGBA , on s'incorpora un quart component que fa referència a l'opacitat de l'element.
Denominació del color
Font: http://www.cellbiol.com/bioinformatics_web_development/wp-content/uploads/2017/01/w3_css3_colors.png
h2 {color:green;}
El codi anterior aplica el color verd a tots els elements que estiguin etiquetats com a h2 . L'utilització del nom és un mètode simple i ens permet una comprensió ràpida de l'estil. Tot i això, presenta varis inconvenients:
- Només es poden utilitzar aquells colors definits.
- No hi ha possibilitat de configurar la transparència de l'element.
- Alguns colors poden no estar disponibles en alguns navegadors.
Colors amb RGB
Utilitzant la notació RGB hi ha dues possibilitats per a especificar un color:
- Notació hexadecimal
- Notació funcional
Notació hexadecimal
La notació hexadecimal s'especifica utilitzant el símbol # seguit de 3 o 6 dígits en notació hexadecimal (0 - F). En el cas d'utilitzar 3 dígits aquesta es converteix a 6 dígits desdoblant cada dígit. En el següent exemple, s'aplica el mateix color als elements de l'etiqueta h2 utilitzant la notació hexadecimal en 6 i 3 dígits.
h2 {
color: #33AA88; /* Utilitzant 6 dígits
rrggbb */
color: #3A8; /* Utilitzant 3 dígits
En aquest cas, cada dígit es desdobla
3->33
A->AA
8->88 */
Notació funcional
En la notació funcional podem especificar el color de dues maneres:
- Notació numèrica. 3 números entre 0 i 255 ambdós inclosos
- Percentatge (entre 0 i 100) de vermell, verd i blau.
El percentatge 0% equival al color 0, mentre que el 100% equival al color 255. En ambdós casos, cal indicar la funció rgb abans d'indicar les tres components del color.
/* ============================================================================================================
Transformem el color #33AA88 (hexadecimal) al seu equivalent en sistema funcional
utilitzant notació en percentatge i numèrica.
Per a fer la conversió s'ha utilitzat la plana web:
https://andylangton.co.uk/tools/colour-converter
============================================================================================================ */
h2 {
color: rgb(51,170,136); /* Utilitzant notació numèrica */
color: rgb(20%,67%,53%); /* Utilitzant notació percentil */
Colors amb RGBA
El sistema RGBA incorpora una quarta component "alpha" relacionada amb la transparència o opacitat del color. El valor que pot prendre aquest quart paràmetre és un valor entre 0 i 1, ambdós inclosos. El valor 1 representa una opacitat total, equival a utilitzar RGB (sense component alpha), mentre que el valor 0 representa una total transparència: el color no serà visible al ser totalment transparent.
Fitxer HTML
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Colors</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
</head>
<body>
<div id="Opac">
Totalment opac - Sense transparència <br/>
background-color: rgba(255,255,0,1);
</div>
<div id="Semi">
Semi opac - Semi transparent<br/>
background-color: rgba(255,255,0,0.5);
</div>
<div id="Trans">
Transparent<br/>
background-color: rgba(255,255,0,0);
</div>
</body>
</html>
Fulla d'estil : style.css
body {background-color: #F00; } /* Red color */
div {
padding-top: 35px;
padding-bottom: 35px;
font-size: 20px;
font-variant: small-caps;
text-align: center;
vertical-align: middle;
margin: 20px;
border: 1px solid #FFF;
}
/* Selector per element identificat per Opac (id="Opac") */
#Opac {
background-color: rgba(255,255,0,1);
}
#Semi {
background-color: rgba(255,255,0,0.5);
}
#Trans {
background-color: rgba(255,255,0,0);
}
Visualització de la imatge amb l'aplicació de l'estil
En la secció hsla hi ha un altre exemple d'aplicació de la transparència/opacitat utilitzant el model HSL tot i que el funcionament de la transparència és exactament el mateix.
Model HSL (Hue, Saturation, Lightness)
El model HSL consisteix en especificar la tonalitat, saturació i luminància per a composar el color.
Comencem definint el color a partir de la tonalitat, que és el primer component. Per a definir la tonalitat hem d'utilitzar la roda de colors (imatge inferior).
Font: https://texample.net/media/tikz/examples/PNG/rgb-color-mixing.png
La selecció del color es fa indicant els graus associats al color que volem obtenir en la roda de colors. Així, per exemple, si es vol el color vermell el valor de la tonalitat serà 0 (graus). Per a obtenir un color verd hem d'utilitzar el valor de 120 (graus).
El següent paràmetre és la saturació que s'indica amb un percentatge que representa la quantitat de gris que tindrà el color.
Finalment el tercer paràmetre fa referència a la quantitat de negre o blanc que tindrem en el color. Si el valor especificat és 0%, serà totalment negre. En el cas que el valor especificat sigui 100% serà totalment blanc.
El següent codi permet veure com varien els colors utilitzant diferents paràmetres amb el mètode HSL. S'ha inclòs l'estil de la pàgina en el propi document per tal de facilitar la seva "instal·lació" i "execució", tot i que aquesta no és una pràctica recomanada.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colors</title>
<!-- <link rel="stylesheet" type="text/css" href="CSS/style.css" /> -->
<style type="text/css">
/* Tot i no ser una bona pràctica s'inclou l'estil en el
mateix document HTML per a facilitar la seva execució */
div,section {
text-align: center;
margin: 20px;
}
div {
height: 250px;
}
section {
padding: 25px 0;
border: 1px solid black;
}
input {text-align: center;}
</style>
<script type="text/javascript">
v=new Array(6);
inc=new Array(3);
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve,ms));
}
async function update() {
for(i=0;i<6;i++) {
v[i]=document.getElementsByName("valor"+i)[0].value;
}
for(i=0;i<3;i++) {
inc[i]=parseInt(document.getElementsByName("inc"+i)[0].value);
}
for(h=v[0];h<=v[1];h=inc[0]+parseInt(h))
{
document.getElementById("hue").innerHTML="HUE: "+h;
for(s=v[2];s<=v[3];s=inc[1]+parseInt(s))
{
document.getElementById("sat").innerHTML="SAT: "+s;
for(l=v[4];l<=v[5];l=inc[2]+parseInt(l))
{
document.getElementById("lig").innerHTML="LIGHTNESS: "+l;
document.getElementById("show").style.backgroundColor="hsl("+h+","+s+"%,"+l+"%)";
console.log("hsl("+h+","+s+"%,"+l+"%)");
await sleep(500);
}
}
}
}
</script>
</head>
<body>
<p>
Tonalitat mínima:<input type="number" name="valor0"
value="0" min="0" max="359" />
Tonalitat máxima:<input type="number" name="valor1"
value="359" min="0" max="359" />
Increment tonalitat:<input type="number" name="inc0"
value="20" min="0" max="50" />
</p>
<p>
Saturació mínima:<input type="number" name="valor2"
value="0" min="0" max="100" />
Saturació máxima:<input type="number" name="valor3"
value="100" min="0" max="100" />
Increment saturació:<input type="number" name="inc1"
value="20" min="0" max="50" />
</p>
<p>
Lluminositat mínima:<input type="number" name="valor4"
value="0" min="0" max="100" />
Lluminositat máxima:<input type="number" name="valor5"
value="100" min="0" max="100" />
Increment lluminositat:<input type="number" name="inc2"
value="20" min="0" max="50" />
</p>
<p><button onclick="update();">Apply</button></p>
<section>
<p id="hue"></p>
<p id="sat"></p>
<p id="lig"></p>
</section>
<div id="show"></div>
</body>
</html>
Nota: Cal tenir en compte que el sistema HSL és l'últim sistema que s'ha implementat i, per tant, pot presentar incompatibilitats amb alguns navegadors o en algunes versions "velles".
Fitxer HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colors</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
</head>
<body>
<div id="show"></div>
</body>
</html>
Fulla d'estil : style.css (CSS/style.css)
div {
height: 250px;
margin: 20px;
background-color:hsl(120,50%,25%); /* hue = 120, saturation = 50% lightness = 25% */
}
Model HSLA (Hue, Saturation, Lightness, Alpha)
El sistema HSLA incorpora una quarta component "alpha" relacionada amb la transparència o opacitat del color. El valor que pot prendre aquest quart paràmetre és un valor entre 0 i 1, ambdós inclosos. El valor 1 representa una opacitat total, equival a utilitzar HSL (sense component alpha), mentre que el valor 0 representa una total transparència: el color no serà visible al ser totalment transparent.
Fitxer HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colors</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
</head>
<body>
<div id="shown">background-color:hsl(120,50%,25%);</div>
<div id="showo">background-color:hsla(120,50%,25%,0);</div>
<div id="showt">background-color:hsla(120,50%,25%,1);</div>
<div id="show25">background-color:hsla(120,50%,25%,0.25);</div>
<div id="show50">background-color:hsla(120,50%,25%,0.50);</div>
<div id="show75">background-color:hsla(120,50%,25%,0.75);</div>
</body>
</html>
Fulla d'estil : style.css (CSS/style.css)
div {
padding: 50px;
text-align: center;
margin: 20px;
border: 2px solid black;
}
#shown {
background-color:hsl(120,50%,25%);
}
#showo{
background-color:hsla(120,50%,25%,0);
}
#showt{
background-color:hsla(120,50%,25%,1);
}
#show25{
background-color:hsla(120,50%,25%,0.25);
}
#show50{
background-color:hsla(120,50%,25%,0.50);
}
#show75{
background-color:hsla(120,50%,25%,0.75);
}