I COLORI IN CSS

I colori vengono specificati utilizzando nomi di colori predefiniti o valori RGB, HEX, HSL, RGBA, HSLA.

NOMI DEI COLORI CSS

In CSS, un colore può essere specificato utilizzando un nome di colore predefinito. CSS/HTML supporta 140 nomi di colori standard.

Un’altra preziosa risorsa dove reperire e scegliere tra migliaia di colori è il seguente sito web: https://coolors.co/ selezionare explore e quindi la palette desiderata.

CSS BACKGROUND COLOR

Imposta il colore di sfondo per gli elementi HTML.

CSS TEXT COLOR

Imposta il colore del testo.

CSS BORDER COLOR

Imposta il colore dei bordi.

VALORI DEI COLORI CSS

In CSS, i colori possono essere specificati anche utilizzando valori RGB, valori HEX, valori HSL, valori RGBA e valori HSLA.

COLORI RGB

Un valore di colore RGB rappresenta le sorgenti luminose ROSSA, VERDE e BLU. In CSS, un colore può essere specificato come valore RGB, usando questa formula:

rgb (rosso, verde, blu)

Ciascun parametro (rosso, verde e blu) definisce l’intensità del colore tra 0 e 255. Ad esempio, rgb(255, 0, 0) viene visualizzato come rosso, perché il rosso è impostato sul valore più alto (255) e gli altri sono impostati su 0. Per visualizzare il nero, imposta tutti i parametri del colore su 0, in questo modo: rgb(0, 0, 0). Per visualizzare il bianco, imposta tutti i parametri del colore su 255, in questo modo: rgb(255, 255, 255).

VALORI RGBA

I valori di colore RGBA sono un’estensione dei valori di colore RGB con un canale alfa, che specifica l’opacità di un colore. Un valore di colore RGBA è specificato con:

rgba (rosso, verde, blu, alfa)

Il parametro alfa è un numero compreso tra 0.0 (completamente trasparente) e 1.0 (assenza di trasparenza).

COLORI ESADECIMALI

Un colore esadecimale è specificato con: #RRGGBB, dove gli interi esadecimali RR (rosso), GG (verde) e BB (blu) specificano i componenti del colore. In CSS, un colore può essere specificato utilizzando un valore esadecimale nella forma:

#rrggbb

Dove rr (rosso), gg (verde) e bb (blu) sono valori esadecimali compresi tra 00 e ff (uguale al decimale 0-255). Ad esempio, #ff0000 viene visualizzato come rosso, perché il rosso è impostato sul valore più alto (ff) e gli altri sono impostati sul valore più basso (00). Per visualizzare il nero, imposta tutti i valori su 00, in questo modo: #000000. Per visualizzare il bianco, imposta tutti i valori su ff, in questo modo: #ffffff.

USARE TRE CIFRE PER ESPRIMERE UN VALORE ESADECIMALE

A volte vedrai un codice esadecimale a tre cifre nel codice sorgente CSS. Il codice esadecimale a 3 cifre è una scorciatoia per alcuni codici esadecimali a 6 cifre. Ha la seguente forma:

#rgb

Dove r, g e b rappresentano i componenti rosso, verde e blu con valori compresi tra 0 e f. Il codice esadecimale a tre cifre può essere utilizzato solo quando entrambi i valori (RR, GG e BB) sono gli stessi per ogni componente. Quindi, se abbiamo #ff00cc, può essere scritto così: #f0c.

COLORI HSL

HSL sta per tonalità, saturazione e luminosità. In CSS, un colore può essere specificato utilizzando tonalità, saturazione e luminosità (HSL) nella forma:

hsl (tonalità, saturazione, luminosità)

La tonalità è un grado sulla ruota dei colori da 0 a 360. 0 è rosso, 120 è verde e 240 è blu. La saturazione è un valore percentuale, 0% indica una sfumatura di grigio e 100% è il colore completo. Anche la luminosità è una percentuale, lo 0% è nero, il 50% non è né chiaro né scuro, il 100% è bianco

SATURAZIONE

La saturazione può essere descritta come l’intensità di un colore. 100% è colore puro, nessuna sfumatura di grigio 50%: 50% grigio, ma puoi ancora vedere il colore. 0% è completamente grigio, non si vede più il colore.

LUMINOSITA’

La luminosità di un colore può essere descritta come quanta luce si vuole dare al colore, dove 0% significa assenza di luce (nero), 50% significa 50% di luce (né scuro né chiaro) 100% significa piena luminosità (bianco).

VALORI HSLA

I valori di colore HSLA sono un’estensione dei valori di colore HSL con un canale alfa, che specifica l’opacità di un colore. Un valore di colore HSLA è specificato con:

hsla (tonalità, saturazione, luminosità, alfa)

Il parametro alfa è un numero compreso tra 0.0 (completamente trasparente) e 1.0 (assenza di trasparenza):

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>COLORI CSS</title>
    
    <script type="rocketlazyloadscript" data-minify="1" data-rocket-type="text/javascript" data-rocket-src="https://83dc87d8.delivery.rocketcdn.me/wp-content/cache/min/1/myfolder/js/script.js?ver=1746894395" data-rocket-defer defer></script>
</head>
<body>
    <h1>RGBA SELEZIONARE I VARI CANALI PER IMPOSTARE IL COLORE </h1>
    <hr>
    <div class="div1">
        <h2>COLORE:</h2>
    </div>
    <br>
    <table>
        <tr>
            <td>
                <label for="red">RED</label>
                <input type="range" class="red" value="255" min="0" max="255" 
                onchange="changeRGB()" oninput="changeRGB()">
            </td>
            <td>
                <label for="green">GREEN</label>
                <input type="range" class="green" min="0" max="255" value="0" 
                onchange="changeRGB()" oninput="changeRGB()">
            </td>
            <td>
                <label for="blue">BLUE</label>
                <input type="range" class="blue" min="0" max="255" value="0" 
                onchange="changeRGB()" oninput="changeRGB()">
            </td>
            <td>
                <label for="alpha">ALPHA</label>
                <input type="range" class="alpha" min="0" max="10" value="5" 
                onchange="changeRGB()" oninput="changeRGB()">
            </td>
        </tr>
    </table>
    <br>
    <hr>
    <h1>CSS BACKGROUND COLOR</h1>
    <h2 class="hello">
        HELLO WORLD!
    </h2>
    <p style="font-weight: 800;">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Doloremque obcaecati explicabo nihil earum in sunt aperiam officiis. 
        Non, porro alias nostrum cupiditate dicta blanditiis, 
        distinctio sequi ratione, officia asperiores magnam.
    </p>
    <h1>CSS BORDER COLOR</h1>
    <h2 class="hello1">HELLO WORLD!</h2>
    <h2 class="hello2">HELLO WORLD!</h2>
    <h2 class="hello3">HELLO WORLD!</h2>
    <br>
    <hr>
    <h1>INPUT TYPE COLOR SELEZIONA LE VARIE RAPPRESENTAZIONI DI COLORE</h1>
    <div class="div2">
        <input type="color" value="#FF0000">
    </div>
    <br>
    <h1>HSLA SELEZIONARE I VARI CANALI PER IMPOSTARE IL COLORE </h1>
    <hr>
    <div class="div3">
        <h2>COLORE:</h2>
    </div>
    <br>
    <table>
        
        <tr>
            <td>
                <label for="hue">TONALITA'</label>
                <input class="hue" onchange="changeHsla()" oninput="changeHsla()" 
                type="range" id="slideHueA" name="slideHueA" value="0" min="0" max="360">
            </td>
            <td>
                <label for="saturazione">SATURAZIONE %</label>
                <input class="saturazione" onchange="changeHsla()" oninput="changeHsla()" 
                type="range" id="slideSatA" name="slideSatA" value="100" 
                min="0" max="100">
            </td>
            <td>
                <label for="luminosita">LUMINOSITA' %</label>
                <input class="luminosita" onchange="changeHsla()" oninput="changeHsla()" type="range" 
                id="slideLightA" name="slideLightA" value="50" min="0" max="100">
            </td>
            <td>
                <label for="alpha">ALPHA</label>
                <input class="alpha2" onchange="changeHsla()" oninput="changeHsla()" type="range" 
                id="slideHslAlpha" name="slideHslAlpha" value="5" min="0" max="10">
            </td>
        </tr>
    </table>
    <br>
    <hr>
</body>
</html>

Copy to Clipboard

function changeRGB()
{
    let myDiv = document.getElementsByClassName("div1");
    let red = document.getElementsByClassName("red");
    let green = document.getElementsByClassName("green");
    let blue = document.getElementsByClassName("blue");
    let alpha = document.getElementsByClassName("alpha");
    let r = red[0].value; let g = green[0].value;
    let b = blue[0].value; let a = alpha[0].value/10;
    myDiv[0].style.background = "rgba("+r+","+g+","+b+","+a+")";
    myDiv[0].innerHTML = "<h2> COLORE: rgba("+r+","+g+","+b+","+a+") </h2>";
}
function changeHsla()
{
    let myDiv = document.getElementsByClassName("div3");
    let hue = document.getElementsByClassName("hue");
    let saturazione = document.getElementsByClassName("saturazione");
    let luminosita = document.getElementsByClassName("luminosita");
    let alpha = document.getElementsByClassName("alpha2");
    let h = hue[0].value; let s = saturazione[0].value;
    let l = luminosita[0].value; let a = alpha[0].value/10;
    myDiv[0].style.background = "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")";
    myDiv[0].innerHTML = 
    "<h2> COLORE: hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")</h2>";
}

LINK AI POST PRECEDENTI

PREVIOUS POST LINKS

LINK AL CODICE SU GITHUB

GITHUB

I COLORI IN CSS

I COLORI IN CSS

NOMI DEI COLORI CSS

CSS BACKGROUND COLOR

CSS TEXT COLOR

CSS BORDER COLOR

VALORI DEI COLORI CSS

COLORI RGB

VALORI RGBA

COLORI ESADECIMALI

USARE TRE CIFRE PER ESPRIMERE UN VALORE ESADECIMALE

COLORI HSL

SATURAZIONE

LUMINOSITA’

VALORI HSLA

LINK AI POST PRECEDENTI

LINK AL CODICE SU GITHUB

Scritto da: Marco Albasini

Scrivi un commento Annulla risposta

Categories

Archive

I COLORI IN CSS

I COLORI IN CSS

I COLORI IN CSS

NOMI DEI COLORI CSS

CSS BACKGROUND COLOR

CSS TEXT COLOR

CSS BORDER COLOR

VALORI DEI COLORI CSS

COLORI RGB

VALORI RGBA

COLORI ESADECIMALI

USARE TRE CIFRE PER ESPRIMERE UN VALORE ESADECIMALE

COLORI HSL

SATURAZIONE

LUMINOSITA’

VALORI HSLA

LINK AI POST PRECEDENTI

LINK AL CODICE SU GITHUB

Scritto da: Marco Albasini

Post correlati

SELETTORI SEMPLICI IN CSS

ALTRI SELETTORI CSS

COMPRENDERE IL BOX MODEL NEI CSS

IL POSIZIONAMENTO CON I CSS

I FLEXBOX CON I CSS

QUERY MULTIMEDIALI – MEDIA QUERIES

CSS FONTS

Scrivi un commento Annulla risposta

Categories

Archive