CSS RGB Colors

CSS RGB Colors: An RGB color value addresses RED, GREEN, and BLUE light sources.


CSS Colors

The color property in CSS is used to set the color of HTML elements. Commonly, this property is used to set the background color or the font color of an element.

In CSS, we use color values for specifying the color. We can likewise use this property for the border-color and other decorative effects.

We can define the color of an element by using the accompanying ways:

  • RGB format.
  • RGBA format.
  • Hexadecimal notation.
  • HSL.
  • HSLA.
  • Built-in color.

RGB Value

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 intensity of the color somewhere in the range of 0 and 255.

For instance, rgb(255, 0, 0) is shown as red, since red is set to its highest value (255) and the others are set to 0.

To show black, set all color parameters to 0, similar to this: rgb(0, 0, 0).

To show white, set all color parameters to 255, similar to this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>

<p>In HTML, you can specify colors using RGB values.</p>

</body>
</html>

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

In HTML, you can specify colors using RGB values.

Shades of gray are often defined using equivalent values for all of the 3 light sources:

Example

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>
<h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>
<h2 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h2>

<p>By using equal values for red, green, and blue, you will get different shades of gray.</p>

</body>
</html>

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

By using equal values for red, green, and blue, you will get different shades of gray.


RGBA Value

RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for 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 (not transparent at all):

Experiment by mixing the RGBA values beneath:

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

<p>You can make transparent colors by using the RGBA color value.</p>

</body>
</html>

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

You can make transparent colors by using the RGBA color value.


Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.


0 Comments

Leave a Reply

Avatar placeholder