CSS Color Codes

What is Color Code?

The color in the HTML elements is set using the color code property in CSS. We can change an element's background or font color with color properties. CSS uses color codes to specify the colors of elements on a web page. There are different ways we can define the color of an element by using some ways such as:

RGB Format
RGBA format
Hexadecimal notation
HSL
HSLA
Built-in color

RGB Format

In CSS, RGB color format presents the three primary colors: Reb, Blue, and Green. In CSS, color can be defined using the RGB color model or format by indicating the intensity of each color.

In CSS, the RGB format is represented by the syntax RGB (red, green, blue), where red, green, and blue are integer values ranging from 0 to 255. Each color channel is broken down as follows:

Red (red): This channel regulates the red color component's intensity. Red intensity ranges from 0 (no red intensity) to 255 (maximum red intensity).
Green (green): This channel regulates the degree to which the green color element is present. The lowest possible value for the intensity of green is 0, and the highest possible value is 255.
Blue (blue): This channel regulates the blue color's intensity. Between 0 and 255, there is no blue intensity, and there is no blue intensity at all.

Example:

Here's an example of how you can use RGB color codes in CSS to style an element:

<!DOCTYPE html>
<html>
<head>
  <style>
    .my-element {
      width: 200px;
      height: 200px;
      background-color: RGB(255, 0, 0); /* Set background color to red */
    }
  </style>
</head>
<body>
  <div class="my-element"></div>
</body>
</html>

In this example, we define the CSs class my-element. In this background, the color property was set to pure red using the RGB color code rbg(255,0,0), and in this, we set the height and width properties to 200 pixels.

As you can see, we set pixel 200x200 element with a red background when you open the HTML file in a browser.

We can implement properties like color, background color, and border color in CSS using RGB color codes. We can swap out the RGB (255,0,0) value for the desired RGB color code to get the desired color effect.

RGBA Format

In CSS, we have RGB format that represents red, blue, and green colors; in CSS, RGBA format helps us specify a color's opacity or transparency. With the help of Red, Green, blue, and Alpha, we can refer to the RGBA model.

With the help of RGBA format, we can denote Alpha for the opacity and transparency of the color, and red, green, and blue can denote their respective color in CSS. The breakdown of each element is as follows:

Red (red): The range of values for the red color component's intensity.
Green (green): The range of values for the green color component's intensity.
Blue (blue): The color's blue component's intensity ranges from 0 to 255.
Alpha (Alpha): The color's opacity or transparency, expressed as an alpha value between 0.0 and 1.0, is called Alpha. A color that is semi-transparent has a value of 0.5.

Example:

Here's an example of using the RGBA color code in CSS to style an element with transparency:

<!DOCTYPE html>
<html>
<head>
  <style>
    .my-element {
      width: 200px;
      height: 200px;
      background-color: rgba(255, 0, 0, 0.5); /* Set background color to semi-transparent red */
    }
  </style>
</head>
<body>
  <div class="my-element"></div>
</body>
</html>

The example above defines the CSS class my-element. We set the background-color property to the RGBA color code rgba(255, 0, 0, 0.5) and the width and height properties to 200 pixels each. This red has an opacity of 0.5 and is semi-transparent.

Hexadecimal Notation

In CSS, hexadecimal notation is a common technique for describing colors because hexadecimal contains three pair digits that represent the intensity of red, green, and blue color that is used for color combination to represent color using a total of six characters.

In CSS, we can define the hexadecimal notation in this syntax #RRGGBB, where RR represents the red intensity, GG represents the green intensity, and BB represents the blue intensity. And each pair has a range from 00 to FF in the hexadecimal notation. The breakdown of each element is as follows:

Red (RR): The red color channel's intensity ranges from 00 to FF.
Green (GG): The green color channel's intensity ranges from 00 to FF.
Blue (BB): The color channel's blue intensity ranges from 00 to FF.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .my-element {
      width: 200px;
      height: 200px;
      background-color: #FF0000; /* Set background color to red using hexadecimal notation */
    }
  </style>
</head>
<body>
  <div class="my-element"></div>
</body>
</html>

In the example above, the CSS class my-element is defined. When setting the background-color property, we entered the hexadecimal color code #FF0000, which stands for pure red. We also set the width and height properties to 200 pixels.

HSL

In CSS, another color model is used to define colors in HSL (Hue, Saturation, and Lightness). We can describe the hue, saturation, and lightness that values color, and it offers a more logical way to define colors. The HSL color model is broken down into the following elements:

Hue: The hue represents the color measured in degrees on a color wheel. It runs from 0 to 360, with 0 and 360 standing for red, 120 for green, and 240 for blue. The intermediate colors are represented by the other degrees.
Saturation: The saturation affects a color's intensity or purity. It is shown as a percentage from 0% (fully desaturated or grayscale) to 100% (fully saturated). A higher saturation value produces more vivid and intense colors, while a lower value produces pastel or muted colors.
Lightness: Lightness refers to the brightness of the color. It is also represented as a percentage, with 0% being completely black (darkest) and 100% completely white (lightest). Intermediate values represent different levels of brightness.

Example:

Let's take an example to understand HSL in more detail:

<!DOCTYPE html>
<html>
<head>
  <style>
    .my-element {
      width: 200px;
      height: 200px;
      background-color: hsl(0, 100%, 50%); /* Set background color to red using HSL color code */
    }
  </style>
</head>
<body>
  <div class="my-element"></div>
</body>
</html>

The CSS class my-element is defined in the example above. We set the background-color property using the HSL color code hsl (0, 100%, 50%), which denotes pure red, and we set the width and height properties to 200 pixels.

When you open it in a web browser, this HTML file will display a 200x200 pixel element with a red background color.

Using the HSL color code, you can define colors by considering their hue, saturation, and lightness values. Hue (in degrees), saturation (in percentage), and lightness (in percentage) are the three inputs for the hsl() function.

HSLA

HSLA is a CSS color model extension to the HSL (Hue, Saturation, and Lightness) color model that includes an additional parameter for defining a color's opacity or transparency.

The letter "A" in HSLA stands for Alpha, which denotes the degree of transparency. Colors in the HSLA format are specified in CSS using the syntax hsla (hue, saturation, lightness, Alpha), where:

Hue: The hue represents the color and is measured in degrees on a color wheel ranging from 0 to 360.
Saturation: The saturation of a color determines its intensity or purity and is expressed as a percentage ranging from 0% to 100%.
Lightness: The lightness of a color refers to its brightness, which is also expressed as a percentage ranging from 0% to 100%.
Alpha: The alpha value ranges from 0.0 to 1.0, representing the color's opacity or transparency. A value of 0.0 indicates complete transparency, while 1.0 indicates complete opacity.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .my-element {
      width: 200px;
      height: 200px;
      background-color: hsla(0, 100%, 50%, 0.5); /* Set background color to semi-transparent red using HSLA color code */
    }
  </style>
</head>
<body>
  <div class="my-element"></div>
</body>
</html>

The CSS class my-element is defined in the example above. We used the HSLA color code hsla(0, 100%, 50%, 0.5) to set the width, height, and background color properties to 200 pixels each. This displays a 0.5 opacity red color that is semi-transparent.

When you open this HTML file in a web browser, you will see a 200x200 pixel element with a semi-transparent red background.

Next TopicDefine CSS Portal

← prev next →