rgb

Description
Syntax
Examples
Links

Description

The rgb function for CSS specifies red, green, and blue.

Channel	Low Unit	High Unit	High Number
r	0.0%	100.0%	255.0
g	0.0%	100.0%	255.0
b	0.0%	100.0%	255.0
a	0.0%	100.0%	1.0

Syntax

CSS

rgb()

Values

<rgb()> =
    [ <legacy-rgb-syntax> | <modern-rgb-syntax> ]

<legacy-rgb-syntax> =
    rgb(
        <percentage>#{3},
        <alpha-value>?
    ) |
    rgb(
        <number>#{3},
        <alpha-value>?
    )

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<alpha-value> =
    <number> |
    <percentage>

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<number>

<modern-rgb-syntax> =
    rgb(
        [ <number> | <percentage> | none ]{3}
        [ / [ <alpha-value> | none ] ]?
    )

<number>

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

none

Specifies a missing component.

<alpha-value> =
    <number> |
    <percentage>

<number>

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

Examples

1 · legacy · rgb · unit

2 · legacy · rgba · unit

3 · legacy · rgb · number

4 · legacy · rgba · number

5 · modern · rgb · unit

6 · modern · rgba · unit

7 · modern · rgb · number

8 · modern · rgba · number

9 · JS

<!doctype html>
<html>
<body>
    <button>initial</button>
    <button value="rgb(100%, 0%, 0%)">legacy rgb unit</button>
    <button value="rgb(100%, 0%, 0%, 50%)">legacy rgba unit</button>
    <button value="rgb(255, 0, 0)">legacy rgb number</button>
    <button value="rgb(255, 0, 0, 0.5)">legacy rgba number</button>
    <button value="rgb(100% 0% 0%)">modern rgb unit</button>
    <button value="rgb(100% 0% 0% / 50%)">modern rgba unit</button>
    <button value="rgb(255 0 0)">modern rgb number</button>
    <button value="rgb(255 0 0 / 0.5)">modern rgba number</button>
    <div>rgb</div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector("html").style.backgroundColor = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>