CSS Colors and CSS Color Names
CSS (Cascading Style Sheets) colors are a fundamental part of web design. They bring life to web pages and enhance the user experience by adding visual appeal. This guide will walk you through the different ways to use colors in CSS, focusing on CSS color names, along with CSS hexadecimal colors, CSS RGB colors, and CSS HSL colors.
CSS Color Names
CSS supports 140 standard color names. These names are easy to remember and use, making them ideal for quick styling. Here are some CSS Standard color names:
| Keyword | Hex value | Sample |
|---|---|---|
| black | #000000 | |
| silver | #c0c0c0 | |
| grey | #808080 | |
| white | #ffffff | |
| maroon | #800000 | |
| red | #ff0000 | |
| purple | #800080 | |
| fuchsia | #ff00ff | |
| green | #008000 | |
| lime | #00ff00 | |
| olive | #808000 | |
| yellow | #ffff00 | |
| navy | #000080 | |
| blue | #0000ff | |
| teal | #008080 | |
| aqua | #00ffff |
Here is an example of how to use these CSS colors:
<html>
<head>
<style>
body {
background-color: aqua;
}
h2 {
color: navy;
}
p {
color: red;
}
</style>
</head>
<body>
<h2>Heading</h2>
<p>This is a red paragraph.</p>
</body>
</html>Heading
This is a red paragraph.
CSS Color Formats
Following Table lists all the CSS color formats:
| Format | Syntax | Example |
|---|---|---|
| Keyword | color-name | black |
| Hexadecimal | #RRGGBB | #FF0000 |
| RGB | rgb(red,green,blue) | RGB(0, 128, 0) |
| HSL | hsl() | HSL(240, 100%, 50%) |
Hexadecimal Colors
Hexadecimal colors are six-digit codes representing the intensity of red, green, and blue. They start with a # symbol.
<html>
<head>
<style>
#box {
width: fit-content;
background-color: #FFFF00
color: #FF0000
}
</style>
</head>
<body>
<div id="box">This is a red text.</div>
</body>
</html>
Short Hex Code: Here #FF0000 can also be used as #F00. In this format each digit is replicated to arrive at an equivalent six-digit code.
RGB Colors
RGB(Red,Green,Blue) colors are defined using the rgb() function, with values ranging from 0 to 255.
<html>
<head>
<style>
p {
background-color: rgb(255, 255, 255);
color: rgb(173, 216, 230);
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>This is a paragraph.
RGBA Colors:
RGBA colors are similar to RGB but include an alpha channel to define opacity.
<html>
<head>
<style>
#box {
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, 0.3);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
HSL Colors
HSL (Hue,Saturation,Lightness) is another way to specify colors, making it easier to adjust the lightness and saturation.
<html>
<head>
<style>
div {
background-color: hsl(195, 53%, 79%);
}
h2 {
color: hsl(240, 100% 25%);
}
p {
color: hsl(0, 0%, 66%);
}
</style>
</head>
<body>
<div>
<h2>My Webpage</h2>
<p>This is a paragraph of text.</p>
</div>
</body>
</html>My Webpage
This is a paragraph of text.
HSLA Colors
HSLA is similar to HSL but includes an alpha channel for transparency.
<html>
<head>
<style>
div {
background-color: hsl(195, 53%, 79%, 0.5);
}
h2 {
color: hsl(240, 100% 25%, 0.7);
}
p {
color: hsl(0, 0%, 66%, 0.9);
}
</style>
</head>
<body>
<div>
<h2>My Webpage</h2>
<p>This is a paragraph of text.</p>
</div>
</body>
</html>My Webpage
This is a paragraph of text.
Advanced Color Functions
CSS currentColor
CSS provides special keywords like currentColor which can be used to inherit the color of the parent element.
<html>
<head>
<style>
div {
color: navy;
}
a {
background-color: yellow;
color: currentColor;
}
</style>
</head>
<body>
<div>
<a href="https://codasnap.blogspot.com/2024/06/html-basics-for-beginners.html">Click Here</a>
</div>
</body>
</html>
Opacity Property
The opacity property allows you to adjust the transparency of an element.
<html>
<head>
<style>
div {
background-color: blue;
opacity: 0.5;
color: white;
}
</style>
</head>
<body>
<div>This is a div</div>
</body>
</html>
Practical Examples
<html>
<head>
<style>
body {
background-color: cyan;
color: white;
}
p.intro {
color: green;
}
button {
background-color: red;
color: white;
}
</style>
</head>
<body>
<p class="intro">Welcome to my webpage. Click this button below!</p>
</body>
</html>Welcome to my webpage. Click this button below!
Conclusion
Mastering CSS colors is crucial for creating visually appealing web designs. By understanding and using various CSS color names, color formats, and functions, you can enhance your website's aesthetics and improve user engagement.
CSS References
| Color Formats | Syntax | Description |
|---|---|---|
| Hexadecimal | #RRGGBB | Six-digit codes representing intensity of red, green, and blue. |
| RGB | rgb(red,green,blue) | RGB colors, defined using rgb() function, with values ranging from 0 to 255. |
| HSL | hsl() | Specifies the colors by adjusting Hue, Saturation, and Lightness. |
| currentColor | currentColor | Inherits the color of the parent element. |
Relevant Links
Introduction to CSS for Beginners
