Every color on a computer screen is created by mixing amounts of Red, Green, and Blue. Computer screens are made up of pixels that emit light. Each pixel can be a different color which creates a picture. When a computer screen is black it means that no light is being emitted. In web design and web development, color not only aids in the creation of visual attraction and conveys information, but it also evokes emotions.
CSS3 provides ways to express colors, allowing you to create complex color schemes and gradients.
Ways to express colors in CSS3
Here are the several ways colors are expressed in CSS3
color keywords
RGB
RGBA
HSL
HSLA
Hexadecimal
Color Keywords
A set of predefined names represents these colors. They are a limited number. The traditional primary and secondary colors (like red, yellow, or blue), shades of gray (from black to white, including colors like dark gray and lightgrey), and a variety of other blended colors, such as light sea green, cornflowerblue, and Rebecca purple, are all examples of colour keywords
h2 {
color: blue;
}
Check out the MDN docs on a list of named colors.
RGB and RGBA
RGB: RGB stands for Red, Green, and Blue. These colors are created by mixing red, green, and blue light. The amount of each color that is mixed determines the final color. For instance, if you mix equal amounts of red, green, and blue light, you will get white.
In CSS RGB colors are specified using the 'rgb()' function. The 'rgb()' function takes three arguments, the amount of red light, the amount of green light, and the amount of blue light. Each argument can be expressed in a number between 0 and 255.
p {
background-color: rgb(102,205,170);
}
You can also use percentages instead of numbers to specify the amount of each color.
div {
background-color: rgb(15%, 25%, 55%);
}
RGBA property allows you to specify a color, just like you would with an RGB value, but adds a fourth value to indicate opacity. This value is known as an alpha value and is a number between 0.0 and 1.0. Using the "A" component, you can control the opacity of colors, creating translucent and transparent effects.
h2 {
background-color: rgba(102, 205, 170, 0.5)
}
HSL and HSLA
As used in colour theory, "hue" denotes the most vibrant, saturated color that can be seen. It is regarded as the most fundamental and essential aspect of colour and is frequently described as red, orange, yellow, green, blue, purple, pink, and so forth. Lightness refers to the degree to which black or white has been mixed with a particular hue. Saturation refers to the intensity or purity of colour.
body {
background-color: hsl(0,0%,78%);
}
Similarly, as in RGBA, the "A" component in HSLA is used to control the opacity of colors.
p {
background-color: hsl(0,0%,78%, 0.5);
}
HEX Codes
Hex codes are a way to represent colors using six-digit hexadecimal numbers. The first two digits represent the amount of red light, the next two digits represent the amount of green light, and the last two digits represent the amount of blue light. For example, the hex code #FF0000 represents pure red, because it has the maximum amount of red light and no green or blue light. The hex code #00FF00 represents pure green because it has the maximum amount of green light and no red or blue light. The hex code #0000FF represents pure blue because it has the maximum amount of blue light and no red or green light.
You can also use hex codes to create shades of colors. For example, the hex code #C0C0C0 represents a light gray, because it has equal amounts of red, green, and blue light.
You can also use hex codes to create transparent colors. To do this, you need to specify a transparency value after the hex code. The transparency value is a number between 0 and 1, where 0 represents no transparency (fully transparent) and 1 represents full opacity (not transparent).
For example, the hex code #FF000000 represents fully transparent red, because it has the maximum amount of red light and no green or blue light, and it has a transparency value of 0. The hex code #FF000001 represents semi-transparent red, because it has the maximum amount of red light and no green or blue light, and it has a transparency value of 1.
Contrast
Color contrast is the difference between the lightness and darkness of two colors. It is important to choose colors with high contrast so that your design is easy to read and understand.
There are a few things to keep in mind when considering contrast:
Legibility: High-contrast colors are easier to read than low-contrast colors. This is because the human eye can see differences in brightness more easily than differences in hue or saturation.
Accessibility: High-contrast colors are important for accessibility. People with low vision or color blindness may have difficulty seeing low-contrast colors.
Design: High-contrast colors can be used to create a striking and eye-catching design. They can also be used to create a sense of hierarchy or importance.
When picking colors, it is important to consider the contrast between the colors and the overall design of the project.
The foreground and background colors should be chosen so that there is sufficient contrast to make the text readable.
Low contrast makes text harder to read which makes it a problem for people with visual impairments and color blindness. Low contrast also affects people with poor monitors or those using devices under the sunlight.
Higher contrast between foreground and background colors makes text easier to read.
However, too much contrast can make text harder to read too. It is always a good idea to measure the contrast of text or graphics against the background color.
Foreground Colors
In CSS the foreground of an element is generally the text although the foreground also may include the borders around the element. Therefore an element's foreground color can be directly manipulated using the color property and by setting the border color using one of the border properties. In non-replaced elements(elements whose content is contained in the document), such as paragraphs and headings, the color property specifies the color of the text in the element.
<p>A brief Google search on the meaning of the word "color" will bring up different websites all with a different explanation of what the word means.</p>
p {
color: blue;
}
The color property can be used in more than one way besides changing the color of an entire paragraph. There are many uses for this property, including but not limited to, changing the hyperlink colors in a document and highlighting relevant sections of text.
Background
The background-color property is used to declare a color for the background of an element. The same ways used to specify foreground colors can be applied to background colors. If the background color is not specified then it is transparent but by combining color and background-color properties, one can create some interesting effects.
p {
background-color: blue;
}
TIP: Text can be made easier to read by separating it from the edge of the box using the padding property.
Most browser windows have a white background by default, but the background color of the window can be changed by the user, so to ensure the background is white, you should use the background-color property.
Tools to help you out when picking colors
ColorSpace: Just enter a color and Generate nice Color Palettes
Color Contrast Checker: This tool helps you determine the contrast between two colors
Coolors: A web-based tool that generates color palettes. You can customize the palettes to your liking, and then export them to a variety of formats.
ColorZilla: A popular extension that allows you to pick colors from any webpage. It also includes a color picker, eyedropper, gradient generator, and other tools.
Conclusion
I hope you enjoyed reading this article. Follow my blog for more content on Beginner friendly articles in web development.✨