CSS Colors

CSS colors can be specified in several ways to style elements on a webpage. Here’s a rundown of the most common methods:

1. Named Colors

CSS supports a set of predefined color names. For example:

color: red; /* Basic color name */
background-color: lightblue; /* Light blue background */

2. Hexadecimal Colors

Hex codes are a six-digit combination of numbers and letters defined by their mix of red, green, and blue (RGB). The format is #RRGGBB.

Basic Hex Code:

color: #ff0000; /* Red */
background-color: #00ff00; /* Green */

Short Hex Code: When all three pairs are the same, you can use a shorthand notation.

color: #f00; /* Red (equivalent to #ff0000) */
background-color: #0f0; /* Green (equivalent to #00ff00) */

3. RGB Colors

RGB values represent colors by specifying the red, green, and blue components.

color: rgb(255, 0, 0); /* Red */
background-color: rgb(0, 255, 0); /* Green */

4. RGBA Colors

RGBA is similar to RGB but includes an alpha value for opacity, where 1 is fully opaque and 0 is fully transparent.

color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
background-color: rgba(0, 255, 0, 0.3); /* Semi-transparent green */

5. HSL Colors

HSL stands for Hue, Saturation, and Lightness. Hue is a color on the wheel, saturation is the intensity, and lightness is the brightness.

Basic HSL:

color: hsl(120, 100%, 50%); /* Green */
background-color: hsl(240, 100%, 50%); /* Blue */

6. HSLA Colors

HSLA includes an alpha value for opacity, similar to RGBA.

color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
background-color: hsla(240, 100%, 50%, 0.3); /* Semi-transparent blue */

7. CurrentColor Keyword

The currentColor keyword allows an element to use the color of its parent element.

color: blue; /* Sets the text color to blue */
border: 2px solid currentColor; /* Sets the border color to the same as the text color */

Examples in Context

Here’s a simple example applying different colors to elements in HTML and CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Colors Example</title>
    <style>
        .named {
            color: blue;
        }
        .hex {
            background-color: #f0f8ff;
        }
        .rgb {
            color: rgb(255, 99, 71);
        }
        .rgba {
            background-color: rgba(255, 99, 71, 0.3);
        }
        .hsl {
            color: hsl(300, 100%, 50%);
        }
        .hsla {
            background-color: hsla(300, 100%, 50%, 0.5);
        }
        .current {
            color: green;
            border: 2px solid currentColor;
        }
    </style>
</head>
<body>
    <p class="named">This text is blue.</p>
    <p class="hex">This background is a light AliceBlue.</p>
    <p class="rgb">This text is Tomato (RGB).</p>
    <p class="rgba">This background is Tomato (RGBA) with some transparency.</p>
    <p class="hsl">This text is a shade of purple (HSL).</p>
    <p class="hsla">This background is a shade of purple (HSLA) with transparency.</p>
    <p class="current">This border is green, the same as the text color.</p>
</body>
</html>

Feel free to ask if you have any specific questions or need more details on any color formats!

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us