In the world of web design, color plays a crucial role in creating visually appealing and user-friendly websites. Understanding how to effectively use color in CSS (Cascading Style Sheets) can enhance the aesthetic quality of your site and improve user experience. This blog will explore various methods to specify colors in CSS, including hexadecimal, RGB, RGBA, HSL, and HSLA values. We will also discuss the importance of color contrast and accessibility, as well as techniques for creating gradients. By the end of this guide, you will have a solid foundation in using color in your web projects.
Using colors in CSS
The following methods can specify colors in CSS:
- Hexadecimal Colors
- RGB colors
- Predefined/Cross-browser color names
- RGBA colors
- HSL colors
- HSLA colors
Hexadecimal Colors
A hexadecimal color is specified with #RRGGBB, where the RR (Red), GG(Green), and BB(Blue) hexadecimal integers specify the components of the color.
The hexadecimal range is 0 to F which means 00 to FF.
For example, the #0000ff value is rendered as blue because the red and blue are set as 00 and the blue component is set as the highest value(ff).
RGB Colors
An RGB color value is specified with the rgb() function, which has the following syntax rgb(red, green, blue).
Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or we can use a percentage value from 0 % to 100 %.
For example, the rgb(0,0,255) value is rendered as blue because the red and green are set to the lowest parameter (0) and the blue parameter is set to its highest value(255).
RGBA Colors
RGBA includes an additional alpha channel for transparency.
The alpha component specifies the level of transparency for a color. The alpha value is between 0 (completely transparent) and 1 (completely opaque).
0: Fully transparent, making the color invisible.
0.5: Semi-transparent, providing a partially see-through effect.
1: Fully opaque, indicating no transparency.
Predefined/Cross-browser Color Names
They are the normal names like White, black, pink, etc.
140 color names are predefined in the HTML and CSS color specifications.
HSL Colors
HSL stands for hue, saturation, and lightness. HSL is specified with the HSL() function, which has the following syntax HSL(120, 100%, 50%).
Hue (0 - 360): Represents the type of color. It's a degree on the color wheel, with red at 0, green at 120, and blue at 240.
Saturation (0% - 100%): Describes the intensity of the color. 0% is grayscale, and 100% is fully saturated.
Lightness (0% - 100%): Specifies the brightness of the color. 0% is black, 100% is white, and 50% is normal.
HSLA Colors
HSLA includes an additional alpha channel for transparency.
The alpha component specifies the level of transparency for a color. The alpha value is between 0 (completely transparent) and 1 (completely opaque).
<h1>HEX Color</h1>
<h2>RGB Color</h2>
<h3>RGBA Color</h3>
<p class="pre">Predefined Color</p>
<p class="hsl">HSL Color</p>
<p class="hsla">HSLA Color</p>
h1 {
color: #ff5733; /* hex code for an orange color */
}
h2 {
color: rgb(255, 87, 51); /*RGB code for the same orange color */
}
h3 {
color: rgba(255, 87, 51, 0.7); /* RGBA code with 70% opacity */
}
.pre {
color: red; /* color name */
}
.hsl {
color: hsl(120, 100%, 50%); /* HSL code */
}
.hsla {
color: hsla(240,100%,50%,0.3); /* /* HSL code with 30% lightness */
}
Opacity
In CSS, the opacity property is used to set the transparency of an element. It takes a value between 0 and 1.
0: The element is fully transparent (completely invisible).
1: The element is fully opaque (completely visible).
<img src="thecodedose.jpeg"alt="thecodedose" />
img {
opacity: 0.5;
}
img:hover {
opacity: 1;
}
Before:
After- hover on the image:
Color Contrast and Accessibility:
Color contrast is one of those important guidelines that ensure that people who cannot see certain colors or who do not see colors at all can normally use any website.
Accessibility or to be precise web content accessibility guidelines in short (WCAG) is a set of guidelines put forward by W3C or the World Wide Web Consortium which develops web standards such as HTML, CSS, etc these guidelines help make the web accessible to people with disabilities.
we have to make sure to use proper color contrast for which WCAG has set some minimum ratios as criteria to pass the web accessibility guidelines. We have a lot of categories like WCAG AA, AAA, Interface components, and many more.
Calulate Color Contrast
color contrast is calculated using relative luminance. It is defined as the relative brightness of any point in color space normalized to zero for the darkest black and one for the lightest white.
So, in simple terms as you can see here the darkest black which is nothing but the hex code #000000 has a relative luminance of 0 which goes up to 1 for the brightest white which is hex code #ffffff and this pretty much applies to any color on the color wheel if you take an example of red and sample out colors from this the relative luminance values are gonna look something like this which again starts from zero and ends at one.
To calculate relative luminance value involves a lot of math but here is a tool called contrast ratio Contrast Ratio, where you can just enter in the hex code and it'll tell you the relative luminance value So, now that we have the relative luminance all we have to do is apply the color contrast formula.
Color Contrast Formula= (L1 + 0.05)/( L2 + 0.05)
where ,
L1 is the luminance of the lighter color
L2 is the luminance of the darker color.
Example
A blue text on a white background.
Here white is a lighter color with a luminance of 1.
Blue is a darker color with a luminance of 0.0722.
Luminance is calculated using the tool, Contrast Ratio.
Now applying these values to the formula,
Color Contrast Formula= (L1 + 0.05)/( L2 + 0.05)
= (1 + 0.05)/( 0.0722 + 0.05)
= 8.59 = 8.59 : 1
you can check our color contrast, to know if it passes the WCAG Guidelines or not.
The tool to check this is the Contrast Checker.
you can also use Browser extensions like "Color Contrast Analyzer" which can provide real-time feedback on the contrast of elements on a webpage.
The blue text on a white background color passes the text as you can see below.
Readability: Sufficient color contrast is crucial for ensuring text and visual elements are easily readable.
Accessibility: Web content should be designed to be inclusive and accessible to users with various abilities. High color contrast enhances the overall accessibility of a website or application, making it usable for a wider audience.
Gradients
CSS gradients let you display a smooth transition between two or more specified colors.
CSS defines types of gradients.
- Linear Gradient (goes down/up/left/right/diagonally)
- Radial Gradient (defined by their center)
Linear Gradient
To create a linear gradient you must define at least two color stops. Color stops are the colors we want to render smooth transitions among. You can also set a starting point and a direction(or an angle) along with the gradient effect.
Syntax
background-image:linear-gradient(direction, color-stop1, colorstop2,...);
Directions Default direction: Top to Bottom
<h1>Linear gradient without direction</h1>
h1 {
background-image: linear-gradient(blueviolet, black);
color: white;
}
Specific direction: to right, to top, to bottom, to left, and to top left
<h2>Linear gradient with right direction</h2>
h2 {
color: white;
background-image: linear-gradient(to right, blueviolet, black);
}
Using angles :
<h3>Linear gradient using degree</h3>
h3 {
color: white;
background-image: linear-gradient(45deg, blueviolet, black);
}
Using transparency : To add transparency, use the rgba() function, in which the last parameter is transparency, and the range is 0(full transparency) to 1 (no transparency)
<h4>Linear gradient using transparency</h4>
h4 {
color: yellow;
background-image: linear-gradient(to right,rgba(255, 0, 0, 0),rgb(166, 0, 255));
}
Radial Gradient
A radial gradient is defined by it's center. To create a radial gradient you must define at least two color stops.
Syntax
background-image:radialr-gradient(shape size at position,start-color,..,last-color);
Example
<h1>Radial gradient</h1>
<h2>Radial gradient with degree</h2>
h1 {
background-image: radial-gradient(blueviolet, black);
color: white;
width: 200px;
height: 150px;
}
h2 {
background-image: radial-gradient(white 20%, black 30%, blueviolet 50%);
color: white;
width: 200px;
height: 150px;
}
<h3 id="rg">Radial gradient using shape-ellipse</h3>
<h4 id="rgc">Radial gradient using shape-circle</h4>
#rg {
background-image: radial-gradient(ellipse, blueviolet, black);
color: white;
width: 200px;
height: 150px;
}
#rgc {
background-image: radial-gradient(circle, blueviolet, black);
color: white;
width: 200px;
height: 150px;
}
Tools and Resources
Color Palette Generators:
Coolors
Coolors is a color scheme generator that allows you to explore, create, and customize color palettes. You can lock specific colors and generate complementary palettes.
Adobe Color Wheel
Adobe Color Wheel Color Wheel lets you create color schemes based on color rules such as analogous, monochromatic, triad, etc. It's a powerful tool for designing harmonious color palettes.
Browser Developer tool: Google Chrome Developer Tools: Right-click on an element, select "Inspect," go to the "Styles" panel, and hover over color values to pick colors. The color picker allows you to test and modify colors in real-time.
Conclusion
Mastering color in CSS is essential for any web designer or developer. By utilizing different color specifications and understanding the significance of color contrast for accessibility, you can create more engaging and inclusive websites. Remember that color not only beautifies your design but also affects usability and user experience. With the tools and resources provided in this blog, you are now equipped to experiment with colors confidently and enhance your web projects.
Thanks for reading the blog and investing your time . I hope you find this blog insightful and you learn something out of this. If you did, then shower some support by giving a reaction to the blog.
Top comments (1)
Great explanation