COLORS IN CSS

Colors are specified using predefined color names or RGB, HEX, HSL, RGBA, HSLA values.

NAMES OF THE CSS COLORS

In CSS, a color can be specified using a predefined color name. CSS/HTML supports 140 standard color names.

Another valuable resource where you can find and choose from thousands of colors is the following website: https://coolors.co/ select explore and then the desired palette.

CSS BACKGROUND COLOR

Set the background color for HTML elements.

CSS TEXT COLOR

Set the text color.

CSS BORDER COLOR

Set the border color.

VALUES OF THE CSS COLORS

In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

RGB COLORS

An RGB color value represents RED, GREEN, and BLUE light sources. In CSS, a color can be specified as an RGB value, using this formula:

rgb (red, green, blue)

Each parameter (red, green and blue) defines the color intensity between 0 and 255. For example, rgb (255, 0, 0) is displayed as red, because red is set to the highest value (255) and the others are set to 0. To display black, set all color parameters to 0, like this: rgb (0, 0, 0). To display white, set all color parameters to 255, like this: rgb (255, 255, 255).

RGBA VALUES

RGBA color values are an extension of RGB color values with an alpha channel, which specifies the opacity of a color. An RGBA color value is specified with:

rgba (red, green, blue, alpha)

The alpha parameter is a number between 0.0 (completely transparent) and 1.0 (no transparency).

HEXADECIMAL COLORS

A hexadecimal color is specified with: #RRGGBB, where the hexadecimal integers RR (red), GG (green), and BB (blue) specify the color components. In CSS, a color can be specified using a hexadecimal value of the form:

#rrggbb

Where rr (red), dd (green) and bb (blue) are hexadecimal values between 00 and ff (equal to the decimal 0-255). For example, #ff0000 is displayed as red, because red is set to the highest value (ff) and the others are set to the lowest value (00). To display black, set all values to 00, like this: #000000. To display white, set all values to ff, like this: #ffffff.

USE THREE DIGITS TO EXPRESS A HEXADECIMAL VALUE

Sometimes you will see a three-digit hexadecimal code in the CSS source code. The 3-digit hexadecimal code is a shortcut for some 6-digit hexadecimal codes. It has the following form:

#rgb

Where r, g and b represent the red, green and blue components with values between 0 and f. The three-digit hexadecimal code can only be used when both values (RR, GG and BB) are the same for each component. So, if we have #ff00cc, it can be written like this: #f0c.

HSL COLORS

HSL stands for hue, saturation and lightness. In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl (hue, saturation, brightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value, 0% indicates a shade of gray and 100% is the full color. Brightness is also a percentage, 0% is black, 50% is neither light nor dark, 100% is white

SATURATION

Saturation can be described as the intensity of a color. 100% is pure color, no shade of gray 50%: 50% gray, but you can still see the color. 0% is completely gray, the color is no longer visible.

BRIGHTNESS

The brightness of a color can be described as how much light you want to give to the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full brightness (white).

HSLA VALUES

HSLA color values are an extension of HSL color values with an alpha channel, which specifies the opacity of a color. An HSLA color value is specified with:

hsla (hue, saturation, brightness, alpha)

The alpha parameter is a number between 0.0 (completely transparent) and 1.0 (no transparency):

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>";
}

LINKS TO PREVIOUS POST

PREVIOUS POST LINKS

LINK TO THE CODE ON GITHUB

GITHUB

COLORS IN CSS

COLORS IN CSS

NAMES OF THE CSS COLORS

CSS BACKGROUND COLOR

CSS TEXT COLOR

CSS BORDER COLOR

VALUES OF THE CSS COLORS

RGB COLORS

RGBA VALUES

HEXADECIMAL COLORS

USE THREE DIGITS TO EXPRESS A HEXADECIMAL VALUE

HSL COLORS

SATURATION

BRIGHTNESS

HSLA VALUES

LINKS TO PREVIOUS POST

LINK TO THE CODE ON GITHUB

About the Author: Marco Albasini

Leave A Comment Cancel reply

Categories

Archive

COLORS IN CSS

COLORS IN CSS

COLORS IN CSS

NAMES OF THE CSS COLORS

CSS BACKGROUND COLOR

CSS TEXT COLOR

CSS BORDER COLOR

VALUES OF THE CSS COLORS

RGB COLORS

RGBA VALUES

HEXADECIMAL COLORS

USE THREE DIGITS TO EXPRESS A HEXADECIMAL VALUE

HSL COLORS

SATURATION

BRIGHTNESS

HSLA VALUES

LINKS TO PREVIOUS POST

LINK TO THE CODE ON GITHUB

About the Author: Marco Albasini

Related Posts

SIMPLE SELECTORS IN CSS

OTHER CSS SELECTORS

UNDERSTANDING THE BOX MODEL IN CSS

POSITIONING WITH CSS

FLEXBOX WITH CSS

MEDIA QUERIES

THE FONTS IN THE CASCADE STYLE SHEETS

Leave A Comment Cancel reply

Categories

Archive