CSS Color Codes
CSS is all about presentation. Discover how CSS Color Codes works to transform plain HTML into a premium user experience in the guide below.
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
- HSLA
- Built-in color
RGB Format
In CSS, the RGB color format showcases the primary colors: Red, Green, and Blue. When working with CSS, color definitions can be specified through the RGB color model, which involves specifying the intensity of each primary 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 is an illustration of how you can utilize RGB color values in CSS to format 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 instance, we are declaring the CSS class named my-element. Within this context, the color attribute was adjusted to a vivid red using the RGB color notation rbg(255,0,0), while simultaneously specifying the dimensions with height and width properties set to 200 pixels.
Upon opening the HTML file in a browser, a 200x200 pixel element with a red background is displayed.
We have the option to define attributes such as color, background color, and border color in CSS by utilizing RGB color values. By substituting the RGB (255,0,0) value with the preferred RGB color code, we can achieve the intended color outcome.
RGBA Format
In CSS, the RGB format is a representation of red, blue, and green hues; meanwhile, the RGBA format enables us to define a color's transparency level. By incorporating red, green, blue, and alpha values, we make use of the RGBA color 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 is an illustration of applying the RGBA color value in CSS to style an element with opacity:
<!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 instance provided illustrates the CSS class named my-element. The background-color attribute is assigned the RGBA color value rgba(255, 0, 0, 0.5), while both the width and height attributes are specified as 200 pixels. This shade of red possesses a transparency level of 0.5, resulting in a semi-transparent appearance.
Hexadecimal Notation
In CSS, hexadecimal representation is frequently employed to define colors due to its structure of three pairs of digits, each representing the intensity of red, green, and blue used in color blending. This method utilizes six characters to accurately portray colors.
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 illustration provided, the CSS class named my-element is established. While assigning the background-color attribute, we inputted the hex color code #FF0000, representing vivid red. Furthermore, we specified the dimensions by setting the width and height properties to 200 pixels.
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 consider an example to delve deeper into the concept of HSL:
<!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 named my-element is specified in the example provided. The background-color attribute is assigned the HSL color value hsl(0, 100%, 50%), indicating a pure red shade, while the width and height attributes are both set to 200 pixels.
Upon loading this HTML document in a web browser, a rectangular element measuring 200x200 pixels will be shown, featuring a background color of red.
By employing the HSL color model, it becomes possible to specify colors based on their hue, saturation, and lightness attributes. The hsl function requires three parameters: hue (expressed in degrees), saturation (as a percentage), and lightness (also as a percentage).
HSLA is an extension of the HSL (Hue, Saturation, and Lightness) color model in CSS, which introduces an extra parameter to specify the opacity or transparency of a color.
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 named my-element has been specified in the illustration provided. An HSLA color code hsla(0, 100%, 50%, 0.5) was applied to establish a width, height, and background color of 200 pixels each. Consequently, a semi-transparent red color with 0.5 opacity is shown.
When the HTML file is loaded in a web browser, a rectangular element measuring 200x200 pixels will be displayed with a partially see-through red background.
