What are the ways to assign a certain color to an element in CSS?

Submitted 3 years ago

Ticket #414

Views 308

Language/Framework CSS

Priority Low

Status Closed

Explain please?

Submitted on Apr 12, 21

rocky

add a comment

1 Answer

Verified

On the web, each color is defined using this 3 colors (in this order: RGB): Red, Green and Blue.

Even black or white are a combination between Red, Green and Blue.

To assign a color to an element, you can use:
- hexadecimal values (values between 0 - F: see base16 allowed values) (each color can be expressed using 1 or 2 letters. You use 1 letter when the second letter from the group is the same)
Example1: #FF0033 can be symplified to #F03

Example2: #FF0144 can't be symplified to #F04 because second group does't use same value for both positions (0 != 1)

- RGB values (values between 0-255 for each color)

Example1: - for green color: rgb(0, 255, 0)

Example2: - for gold color: rgb(255,215,0)

- RGBA values (same as RGB above, but with an aditional alpha value. This value can be between 0 and 1 and represents the opacity)

Example1: - for green color with 85% opacity: rgba(0, 255, 0, 0.85)

Example2: - for gold color with 8% opacity: rgba(255,215,0, 0.08)

- HSL values

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.

Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.

Lightness is also a percentage; 0% is black, 100% is white.

Example: - light-blue color: hsl(180, 50%, 50%)

- HSLA value (same as HSL with additional opacity value)

Example: red color with 80% opacity: hsl(0, 100%, 50%, 0.8)

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Doc</title>
  <style>
    /* use an external file instead, and a <link> tag */

    /* example for HEXADECIMAL value. Must start with "#" */
    h1 { 
        color: #f00; /* for RED color. You can use also: #ff0000 */ 
        background-color: rgb(128,128,128);  /* gray color */
    }

    .blue-bkg {
        background-color: rgba(0,0,255, 0.9);  /* blue background */
    }

    .white-text {
        color: hsl(0, 0%, 100%);
    }
  </style>
</head>
<body>
  <h1>My First Heading</h1>
  <p class="blue-bkg white-text">My first paragraph.</p>
</body>
</html>

Notice:

Hexadecimal values are the most popular, followed by RGB/RGBa.
I've never used HSL/HSLa so far and I don't intend to use them anytime soon, nor do I know people using them.

More info here: W3Schools.com (https://www.w3schools.com/colors/default.asp)

Submitted 3 years ago