CSS Colors

Colors are one of the most fundamental and important properties in CSS. CSS provides multiple ways to define and use colors, making web design more vibrant and engaging.

Color Representation Methods

1. Color Names

CSS supports 140+ predefined color names.

Syntax:

css

color: colorname;

Example:

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .red { color: red; }
        .blue { color: blue; }
        .green { color: green; }
        .orange { color: orange; }
        .purple { color: purple; }
        .pink { color: pink; }
        .brown { color: brown; }
        .gray { color: gray; }
    </style>
</head>
<body>
    <p class="red">Red text</p>
    <p class="blue">Blue text</p>
    <p class="green">Green text</p>
</body>
</html>

Common Color Names:

Basic colors: red, blue, green, yellow, orange, purple, pink, brown
Black, white, gray: black, white, gray, silver, darkgray, lightgray
Special colors: transparent (transparent), currentColor (current color)

2. Hexadecimal Colors

Uses # followed by 6 or 3 hexadecimal digits to represent colors.

Syntax:

css

/* 6-digit format */
color: #RRGGBB;

/* 3-digit format (shorthand) */
color: #RGB;

/* 8-digit format (with alpha) */
color: #RRGGBBAA;

Example:

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .hex-full { color: #FF5733; }      /* Orange-red */
        .hex-short { color: #F53; }        /* Equivalent to #FF5533 */
        .hex-alpha { color: #FF573380; }   /* 50% transparent orange-red */
        
        .bg-hex {
            background-color: #3498db;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <p class="hex-full">Full hexadecimal color</p>
    <p class="hex-short">Short hexadecimal color</p>
    <p class="hex-alpha">Hexadecimal color with alpha</p>
    <div class="bg-hex">Blue background</div>
</body>
</html>

Hexadecimal Reference:

#000000 = Black
#FFFFFF = White
#FF0000 = Red
#00FF00 = Green
#0000FF = Blue
#FFFF00 = Yellow
#FF00FF = Magenta
#00FFFF = Cyan

3. RGB Colors

Defines colors using Red, Green, and Blue primary color values.

Syntax:

css

color: rgb(red, green, blue);
/* Each value range: 0-255 */

Example:

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .rgb-red { color: rgb(255, 0, 0); }
        .rgb-green { color: rgb(0, 255, 0); }
        .rgb-blue { color: rgb(0, 0, 255); }
        .rgb-custom { color: rgb(52, 152, 219); }
        
        .rgb-box {
            background-color: rgb(46, 204, 113);
            color: white;
            padding: 15px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <p class="rgb-red">RGB Red</p>
    <p class="rgb-green">RGB Green</p>
    <p class="rgb-blue">RGB Blue</p>
    <p class="rgb-custom">Custom RGB Color</p>
    <div class="rgb-box">RGB Background Color</div>
</body>
</html>

4. RGBA Colors (With Transparency)

RGBA adds an Alpha channel (transparency) to RGB.

Syntax:

css

color: rgba(red, green, blue, alpha);
/* alpha range: 0.0 (fully transparent) to 1.0 (fully opaque) */

Example:

html

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
        
        .rgba-box {
            width: 200px;
            height: 100px;
            margin: 10px;
            padding: 20px;
            color: white;
            font-weight: bold;
        }
        
        .alpha-100 { background-color: rgba(231, 76, 60, 1.0); }
        .alpha-75 { background-color: rgba(231, 76, 60, 0.75); }
        .alpha-50 { background-color: rgba(231, 76, 60, 0.5); }
        .alpha-25 { background-color: rgba(231, 76, 60, 0.25); }
    </style>
</head>
<body>
    <div class="rgba-box alpha-100">Opacity 100%</div>
    <div class="rgba-box alpha-75">Opacity 75%</div>
    <div class="rgba-box alpha-50">Opacity 50%</div>
    <div class="rgba-box alpha-25">Opacity 25%</div>
</body>
</html>

5. HSL Colors

HSL stands for Hue, Saturation, and Lightness.

Syntax:

css

color: hsl(hue, saturation%, lightness%);

Hue: 0-360 degrees on the color wheel
- 0 or 360 = Red
- 120 = Green
- 240 = Blue
Saturation: 0%-100%
- 0% = Gray
- 100% = Fully saturated
Lightness: 0%-100%
- 0% = Black
- 50% = Normal
- 100% = White

Example:

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .hsl-demo {
            padding: 20px;
            margin: 10px;
            color: white;
            font-weight: bold;
        }
        
        /* Different hues */
        .hue-0 { background-color: hsl(0, 100%, 50%); }     /* Red */
        .hue-120 { background-color: hsl(120, 100%, 50%); } /* Green */
        .hue-240 { background-color: hsl(240, 100%, 50%); } /* Blue */
        
        /* Different saturations */
        .sat-100 { background-color: hsl(200, 100%, 50%); }
        .sat-50 { background-color: hsl(200, 50%, 50%); }
        .sat-0 { background-color: hsl(200, 0%, 50%); }
        
        /* Different lightness */
        .light-75 { background-color: hsl(200, 100%, 75%); }
        .light-50 { background-color: hsl(200, 100%, 50%); }
        .light-25 { background-color: hsl(200, 100%, 25%); }
    </style>
</head>
<body>
    <h3>Different Hues</h3>
    <div class="hsl-demo hue-0">Hue 0° - Red</div>
    <div class="hsl-demo hue-120">Hue 120° - Green</div>
    <div class="hsl-demo hue-240">Hue 240° - Blue</div>
    
    <h3>Different Saturations</h3>
    <div class="hsl-demo sat-100">Saturation 100%</div>
    <div class="hsl-demo sat-50">Saturation 50%</div>
    <div class="hsl-demo sat-0">Saturation 0%</div>
    
    <h3>Different Lightness</h3>
    <div class="hsl-demo light-75">Lightness 75%</div>
    <div class="hsl-demo light-50">Lightness 50%</div>
    <div class="hsl-demo light-25">Lightness 25%</div>
</body>
</html>

6. HSLA Colors (With Transparency)

HSLA adds an Alpha channel to HSL.

Syntax:

css

color: hsla(hue, saturation%, lightness%, alpha);

Example:

css

.hsla-example {
    background-color: hsla(200, 100%, 50%, 0.5);
}

Color Properties

color Property

Sets text color.

css

p {
    color: #333;
}

h1 {
    color: rgb(52, 152, 219);
}

.highlight {
    color: hsl(45, 100%, 50%);
}

background-color Property

Sets background color.

css

body {
    background-color: #f5f5f5;
}

.card {
    background-color: white;
}

.alert {
    background-color: rgba(255, 0, 0, 0.1);
}

border-color Property

Sets border color.

css

.box {
    border: 2px solid #3498db;
}

.warning {
    border-color: orange;
}

Color Comparison Table

Method	Example	Advantages	Disadvantages
Color Names	`red`	Easy to read and remember	Limited choices
Hexadecimal	`#FF5733`	Widely supported, concise	Not intuitive
RGB	`rgb(255, 87, 51)`	Intuitive, easy to understand	Longer code
RGBA	`rgba(255, 87, 51, 0.5)`	Supports transparency	Longer code
HSL	`hsl(9, 100%, 60%)`	Easy to adjust hue/saturation/lightness	Less intuitive
HSLA	`hsla(9, 100%, 60%, 0.5)`	Supports transparency, easy to adjust	Longest code

Practical Color Examples

Common Color Schemes

html

<!DOCTYPE html>
<html>
<head>
    <style>
        .color-palette {
            display: flex;
            gap: 10px;
            margin: 20px 0;
        }
        
        .color-box {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            border-radius: 8px;
        }
        
        /* Blue palette */
        .blue-1 { background-color: #3498db; }
        .blue-2 { background-color: #2980b9; }
        .blue-3 { background-color: #1abc9c; }
        
        /* Red palette */
        .red-1 { background-color: #e74c3c; }
        .red-2 { background-color: #c0392b; }
        .red-3 { background-color: #e67e22; }
        
        /* Green palette */
        .green-1 { background-color: #2ecc71; }
        .green-2 { background-color: #27ae60; }
        .green-3 { background-color: #16a085; }
        
        /* Gray palette */
        .gray-1 { background-color: #ecf0f1; color: #333; }
        .gray-2 { background-color: #bdc3c7; color: #333; }
        .gray-3 { background-color: #95a5a6; }
        .gray-4 { background-color: #7f8c8d; }
        .gray-5 { background-color: #34495e; }
    </style>
</head>
<body>
    <h3>Blue Palette</h3>
    <div class="color-palette">
        <div class="color-box blue-1">#3498db</div>
        <div class="color-box blue-2">#2980b9</div>
        <div class="color-box blue-3">#1abc9c</div>
    </div>
    
    <h3>Red Palette</h3>
    <div class="color-palette">
        <div class="color-box red-1">#e74c3c</div>
        <div class="color-box red-2">#c0392b</div>
        <div class="color-box red-3">#e67e22</div>
    </div>
    
    <h3>Green Palette</h3>
    <div class="color-palette">
        <div class="color-box green-1">#2ecc71</div>
        <div class="color-box green-2">#27ae60</div>
        <div class="color-box green-3">#16a085</div>
    </div>
    
    <h3>Gray Palette</h3>
    <div class="color-palette">
        <div class="color-box gray-1">#ecf0f1</div>
        <div class="color-box gray-2">#bdc3c7</div>
        <div class="color-box gray-3">#95a5a6</div>
        <div class="color-box gray-4">#7f8c8d</div>
        <div class="color-box gray-5">#34495e</div>
    </div>
</body>
</html>

Gradient Backgrounds

css

.gradient-linear {
    background: linear-gradient(to right, #3498db, #2ecc71);
}

.gradient-radial {
    background: radial-gradient(circle, #e74c3c, #c0392b);
}

.gradient-multi {
    background: linear-gradient(45deg, 
        #3498db 0%, 
        #9b59b6 50%, 
        #e74c3c 100%
    );
}

CSS Colors ​

Color Representation Methods ​

1. Color Names ​

2. Hexadecimal Colors ​

3. RGB Colors ​

4. RGBA Colors (With Transparency) ​

5. HSL Colors ​

6. HSLA Colors (With Transparency) ​

Color Properties ​

color Property ​

background-color Property ​

border-color Property ​

Color Comparison Table ​

Practical Color Examples ​

Common Color Schemes ​

Gradient Backgrounds ​

CSS Colors

Color Representation Methods

1. Color Names

2. Hexadecimal Colors

3. RGB Colors

4. RGBA Colors (With Transparency)

5. HSL Colors

6. HSLA Colors (With Transparency)

Color Properties

color Property

background-color Property

border-color Property

Color Comparison Table

Practical Color Examples

Common Color Schemes

Gradient Backgrounds