CSS 4 💻 colors and color properties

CSS provides multiple ways to specify colors, allowing you to style text, backgrounds, borders, and more. Understanding color formats and properties is essential for creating visually appealing web pages.

---

Color Formats

Format	Example	Description
Named Colors	red, blue, yellow	Predefined color names
Hexadecimal	#FF0000, #F00	6-digit or 3-digit hex values
RGB	rgb(255, 0, 0)	Red, Green, Blue (0–255)
RGBA	rgba(255, 0, 0, 0.5)	RGB with opacity (0–1)
HSL	hsl(0, 100%, 50%)	Hue, Saturation, Lightness
HSLA	hsla(0, 100%, 50%, 0.5)	HSL with opacity

---

1. Named Colors

CSS supports over 140 predefined color names.

p {
    color: red;
}

.container {
    background-color: lightblue;
}

.warning {
    color: orange;
    background-color: black;
}

Common Named Colors:
red, blue, green, yellow, orange, purple, pink, brown, black, white, gray, cyan, magenta, lime, navy, olive, teal, violet, gold, silver

---

2. Hexadecimal Colors

Hex values use a # followed by 6 characters (0–9, A–F) or 3 characters (shorthand).

/* Full hex (6 digits) */
.container {
    background-color: #123456;
}

/* Shorthand hex (3 digits) */
.box {
    background-color: #F00; /* Same as #FF0000 (red) */
}

/* RGB */
body {
    background-color: rgb(255, 0, 0); /* Red */
}

/* RGBA (with opacity) */
div {
    background-color: rgba(255, 0, 0, 0.5); /* 50% opacity */
}

Shorthand	Full	Color
#F00	#FF0000	Red
#0F0	#00FF00	Green
#00F	#0000FF	Blue
#FFF	#FFFFFF	White
#000	#000000	Black

---

3. RGB and RGBA

RGB uses values from 0 to 255 for each color channel. RGBA adds an alpha channel for opacity.

div {
    background-color: rgb(255, 0, 0); /* Red */
    color: rgb(0, 255, 0); /* Green text */
    border-color: rgb(0, 0, 255); /* Blue border */
}

.transparent {
    background-color: rgba(255, 0, 0, 0.5); /* 50% transparent red */
}

---

4. HSL and HSLA

HSL stands for Hue, Saturation, and Lightness.

• Hue: 0–360 (color wheel)
• Saturation: 0–100% (0% = gray, 100% = vibrant)
• Lightness: 0–100% (0% = black, 100% = white)

.hsl-blue {
    background-color: hsl(240, 100%, 50%); /* Blue */
}

.hsl-pastel {
    background-color: hsl(0, 50%, 80%); /* Soft red */
}

.hsla-transparent {
    background-color: hsla(22, 55%, 64%, 0.7); /* With opacity */
}

---

Color Properties

Property	Description	Example
color	Sets text color	color: #333;
background-color	Sets background color	background-color: rgba(255, 0, 0, 0.5);
border-color	Sets border color	border-color: hsl(0, 100%, 75%);
text-shadow	Adds shadow to text	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
box-shadow	Adds shadow to element	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
opacity	Element opacity (0–1)	opacity: 0.7;
caret-color	Sets input cursor color	caret-color: red;

---

Color Formats Comparison

Format	Example	Use Case
Named	red	Quick prototyping
Hex	#FF0000	Most common, compact
RGB	rgb(255, 0, 0)	Easy to adjust values
RGBA	rgba(255, 0, 0, 0.5)	Transparent colors
HSL	hsl(0, 100%, 50%)	Easy to adjust hue/saturation
HSLA	hsla(0, 100%, 50%, 0.5)	Transparent HSL

---

CSS Gradients

Gradients allow you to create smooth transitions between colors.

/* Linear Gradient (left to right) */
.linear {
    background-image: linear-gradient(to right, red, blue);
}

/* Linear Gradient (top to bottom) */
.linear-vertical {
    background-image: linear-gradient(to bottom, red, blue);
}

/* Linear Gradient (diagonal) */
.linear-diagonal {
    background-image: linear-gradient(45deg, red, blue);
}

/* Linear Gradient (multiple colors) */
.linear-multi {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple);
}

/* Radial Gradient (circle) */
.radial {
    background-image: radial-gradient(circle, red, blue);
}

/* Radial Gradient (ellipse) */
.radial-ellipse {
    background-image: radial-gradient(ellipse, red, blue);
}

/* Conic Gradient */
.conic {
    background-image: conic-gradient(from red, blue);
}

/* Repeating Linear Gradient */
.repeating-linear {
    background-image: repeating-linear-gradient(45deg, red 10%, blue 20%);
}

/* Repeating Radial Gradient */
.repeating-radial {
    background-image: repeating-radial-gradient(circle, red 10%, blue 20%);
}

---

CSS Filters

Filters apply graphical effects to elements.

.filter-demo {
    /* Hue rotation */
    filter: hue-rotate(180deg);

    /* Brightness */
    filter: brightness(50%);

    /* Contrast */
    filter: contrast(200%);

    /* Grayscale (0-100%) */
    filter: grayscale(100%);

    /* Saturation (0-100%) */
    filter: saturate(200%);

    /* Invert (0-100%) */
    filter: invert(100%);

    /* Sepia (0-100%) */
    filter: sepia(70%);

    /* Multiple filters */
    filter: brightness(150%) contrast(120%) saturate(150%);
}

---

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colors and Color Properties</title>
    <style>
        /* ====== GLOBAL SETUP ====== */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .demo-box {
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            text-align: center;
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }

        .grid-3 .demo-box {
            min-height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        /* ====== COLOR PROPERTY DEMOS ====== */

        /* ---- Named Colors ---- */
        .named-demo {
            background-color: lightblue;
            color: navy;
            border: 2px solid blue;
        }

        /* ---- Hex Colors ---- */
        .hex-demo {
            background-color: #123456;
            color: #FFFFFF;
            border: 2px solid #FFD700;
        }

        /* ---- RGB Colors ---- */
        .rgb-demo {
            background-color: rgb(255, 0, 0);
            color: rgb(255, 255, 255);
            border: 2px solid rgb(0, 255, 0);
        }

        /* ---- RGBA Colors ---- */
        .rgba-demo {
            background-color: rgba(255, 0, 0, 0.5);
            color: #333;
            border: 2px solid rgba(0, 0, 255, 0.5);
        }

        /* ---- HSL Colors ---- */
        .hsl-demo {
            background-color: hsl(240, 100%, 50%);
            color: hsl(0, 0%, 100%);
            border: 2px solid hsl(0, 100%, 75%);
        }

        /* ---- HSLA Colors ---- */
        .hsla-demo {
            background-color: hsla(22, 55%, 64%, 0.7);
            color: #333;
            border: 2px solid hsla(22, 55%, 64%, 0.3);
        }

        /* ---- Text Shadow ---- */
        .text-shadow-demo {
            font-size: 2rem;
            font-weight: bold;
            color: #007bff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        /* ---- Box Shadow ---- */
        .box-shadow-demo {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        /* ---- Opacity ---- */
        .opacity-demo {
            background: #007bff;
            color: white;
            padding: 15px;
            opacity: 0.7;
        }

        /* ---- Caret Color ---- */
        .caret-demo {
            caret-color: red;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 4px;
            width: 100%;
            max-width: 300px;
            font-size: 1rem;
        }

        .caret-demo:focus {
            border-color: red;
            outline: none;
        }

        /* ====== GRADIENT DEMOS ====== */

        .gradient-linear {
            background-image: linear-gradient(to right, red, blue);
        }

        .gradient-linear-multi {
            background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple);
        }

        .gradient-radial {
            background-image: radial-gradient(circle, red, blue);
        }

        .gradient-conic {
            background-image: conic-gradient(red, blue, green, red);
        }

        .gradient-repeating {
            background-image: repeating-linear-gradient(45deg, red 10%, blue 20%);
        }

        /* ====== FILTER DEMOS ====== */

        .filter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin: 15px 0;
        }

        .filter-grid .demo-box {
            min-height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            background: #007bff;
            color: white;
            border: none;
        }

        .filter-hue {
            filter: hue-rotate(180deg);
        }

        .filter-brightness {
            filter: brightness(50%);
        }

        .filter-contrast {
            filter: contrast(200%);
        }

        .filter-grayscale {
            filter: grayscale(100%);
        }

        .filter-saturate {
            filter: saturate(200%);
        }

        .filter-invert {
            filter: invert(100%);
        }

        .filter-sepia {
            filter: sepia(70%);
        }

        .filter-multiple {
            filter: brightness(150%) contrast(120%) saturate(150%);
        }

        /* ---- Mix Blend Mode ---- */
        .blend-container {
            background-image: linear-gradient(to right, #ff6b6b, #4ecdc4);
            padding: 20px;
            border-radius: 8px;
            margin: 10px 0;
        }

        .blend-demo {
            color: white;
            font-size: 2rem;
            font-weight: bold;
            text-align: center;
            mix-blend-mode: multiply;
        }
    </style>
</head>
<body>

    <h1>Colors and Color Properties</h1>

    <!-- ====== COLOR FORMATS ====== -->
    <section>
        <h2>1. Color Formats</h2>

        <h3>Named Colors</h3>
        <div class="demo-box named-demo">Named Color: lightblue / navy</div>

        <h3>Hexadecimal Colors</h3>
        <div class="demo-box hex-demo">Hex: #123456 / #FFFFFF / #FFD700</div>

        <h3>RGB Colors</h3>
        <div class="demo-box rgb-demo">RGB: rgb(255, 0, 0) / rgb(0, 255, 0)</div>

        <h3>RGBA Colors (with opacity)</h3>
        <div class="demo-box rgba-demo">RGBA: rgba(255, 0, 0, 0.5)</div>

        <h3>HSL Colors</h3>
        <div class="demo-box hsl-demo">HSL: hsl(240, 100%, 50%)</div>

        <h3>HSLA Colors (with opacity)</h3>
        <div class="demo-box hsla-demo">HSLA: hsla(22, 55%, 64%, 0.7)</div>

        <div class="code-block">
            /* Named Colors */
            background-color: lightblue;
            color: navy;

            /* Hexadecimal */
            background-color: #123456;
            color: #FFFFFF;

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

            /* RGBA */
            background-color: rgba(255, 0, 0, 0.5);

            /* HSL */
            background-color: hsl(240, 100%, 50%);

            /* HSLA */
            background-color: hsla(22, 55%, 64%, 0.7);
        </div>
    </section>

    <!-- ====== COLOR PROPERTIES ====== -->
    <section>
        <h2>2. Color Properties</h2>

        <div class="grid-3">
            <div class="demo-box" style="background: #007bff; color: white;">
                <code>color</code><br>Sets text color
            </div>
            <div class="demo-box" style="background: #28a745; color: white;">
                <code>background-color</code><br>Sets background color
            </div>
            <div class="demo-box" style="background: white; border: 3px solid #dc3545;">
                <code>border-color</code><br>Sets border color
            </div>
        </div>

        <h3>Text Shadow</h3>
        <div class="demo-box text-shadow-demo">Text Shadow</div>

        <h3>Box Shadow</h3>
        <div class="demo-box box-shadow-demo">Box Shadow</div>

        <h3>Opacity</h3>
        <div class="demo-box opacity-demo">Opacity: 0.7</div>

        <h3>Caret Color</h3>
        <input type="text" class="caret-demo" placeholder="Caret is red">

        <div class="code-block">
            /* Text Properties */
            color: #333;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

            /* Background Properties */
            background-color: rgba(255, 0, 0, 0.5);

            /* Border Properties */
            border-color: hsl(0, 100%, 75%);

            /* Box Shadow */
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

            /* Opacity */
            opacity: 0.7;

            /* Caret Color */
            caret-color: red;
        </div>
    </section>

    <!-- ====== GRADIENTS ====== -->
    <section>
        <h2>3. Gradients</h2>

        <div class="grid-3">
            <div class="demo-box gradient-linear">Linear Gradient</div>
            <div class="demo-box gradient-linear-multi">Multi-color Linear</div>
            <div class="demo-box gradient-radial">Radial Gradient</div>
            <div class="demo-box gradient-conic">Conic Gradient</div>
            <div class="demo-box gradient-repeating">Repeating Linear</div>
        </div>

        <div class="code-block">
            /* Linear Gradient (left to right) */
            background-image: linear-gradient(to right, red, blue);

            /* Linear Gradient (multiple colors) */
            background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple);

            /* Radial Gradient (circle) */
            background-image: radial-gradient(circle, red, blue);

            /* Conic Gradient */
            background-image: conic-gradient(red, blue, green, red);

            /* Repeating Linear Gradient */
            background-image: repeating-linear-gradient(45deg, red 10%, blue 20%);
        </div>
    </section>

    <!-- ====== FILTERS ====== -->
    <section>
        <h2>4. Filters</h2>

        <div class="filter-grid">
            <div class="demo-box filter-hue">hue-rotate(180deg)</div>
            <div class="demo-box filter-brightness">brightness(50%)</div>
            <div class="demo-box filter-contrast">contrast(200%)</div>
            <div class="demo-box filter-grayscale">grayscale(100%)</div>
            <div class="demo-box filter-saturate">saturate(200%)</div>
            <div class="demo-box filter-invert">invert(100%)</div>
            <div class="demo-box filter-sepia">sepia(70%)</div>
            <div class="demo-box filter-multiple">Multiple Filters</div>
        </div>

        <div class="code-block">
            /* Individual Filters */
            filter: hue-rotate(180deg);
            filter: brightness(50%);
            filter: contrast(200%);
            filter: grayscale(100%);
            filter: saturate(200%);
            filter: invert(100%);
            filter: sepia(70%);

            /* Multiple Filters */
            filter: brightness(150%) contrast(120%) saturate(150%);
        </div>
    </section>

    <!-- ====== REFERENCE TABLES ====== -->
    <section>
        <h2>5. Reference Tables</h2>

        <h3>Color Formats</h3>
        <table class="reference-table">
            <tr>
                <th>Format</th>
                <th>Example</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><code>Named</code></td>
                <td><code>red</code></td>
                <td>Predefined color names</td>
            </tr>
            <tr>
                <td><code>Hex</code></td>
                <td><code>#FF0000</code></td>
                <td>6-digit or 3-digit hex values</td>
            </tr>
            <tr>
                <td><code>RGB</code></td>
                <td><code>rgb(255, 0, 0)</code></td>
                <td>Red, Green, Blue (0–255)</td>
            </tr>
            <tr>
                <td><code>RGBA</code></td>
                <td><code>rgba(255, 0, 0, 0.5)</code></td>
                <td>RGB with opacity (0–1)</td>
            </tr>
            <tr>
                <td><code>HSL</code></td>
                <td><code>hsl(0, 100%, 50%)</code></td>
                <td>Hue, Saturation, Lightness</td>
            </tr>
            <tr>
                <td><code>HSLA</code></td>
                <td><code>hsla(0, 100%, 50%, 0.5)</code></td>
                <td>HSL with opacity</td>
            </tr>
        </table>

        <h3>Color Properties</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>color</code></td>
                <td>Sets text color</td>
                <td><code>color: #333;</code></td>
            </tr>
            <tr>
                <td><code>background-color</code></td>
                <td>Sets background color</td>
                <td><code>background-color: rgba(255, 0, 0, 0.5);</code></td>
            </tr>
            <tr>
                <td><code>border-color</code></td>
                <td>Sets border color</td>
                <td><code>border-color: hsl(0, 100%, 75%);</code></td>
            </tr>
            <tr>
                <td><code>text-shadow</code></td>
                <td>Adds shadow to text</td>
                <td><code>text-shadow: 2px 2px 4px rgba(0,0,0,0.5);</code></td>
            </tr>
            <tr>
                <td><code>box-shadow</code></td>
                <td>Adds shadow to element</td>
                <td><code>box-shadow: 2px 2px 4px rgba(0,0,0,0.3);</code></td>
            </tr>
            <tr>
                <td><code>opacity</code></td>
                <td>Element opacity (0–1)</td>
                <td><code>opacity: 0.7;</code></td>
            </tr>
            <tr>
                <td><code>caret-color</code></td>
                <td>Sets input cursor color</td>
                <td><code>caret-color: red;</code></td>
            </tr>
        </table>

        <h3>Filters</h3>
        <table class="reference-table">
            <tr>
                <th>Filter</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>hue-rotate</code></td>
                <td>Rotates the color wheel</td>
                <td><code>hue-rotate(180deg)</code></td>
            </tr>
            <tr>
                <td><code>brightness</code></td>
                <td>Changes brightness</td>
                <td><code>brightness(50%)</code></td>
            </tr>
            <tr>
                <td><code>contrast</code></td>
                <td>Changes contrast</td>
                <td><code>contrast(200%)</code></td>
            </tr>
            <tr>
                <td><code>grayscale</code></td>
                <td>Converts to grayscale</td>
                <td><code>grayscale(100%)</code></td>
            </tr>
            <tr>
                <td><code>saturate</code></td>
                <td>Changes saturation</td>
                <td><code>saturate(200%)</code></td>
            </tr>
            <tr>
                <td><code>invert</code></td>
                <td>Inverts colors</td>
                <td><code>invert(100%)</code></td>
            </tr>
            <tr>
                <td><code>sepia</code></td>
                <td>Converts to sepia</td>
                <td><code>sepia(70%)</code></td>
            </tr>
        </table>
    </section>

</body>
</html>

---

Quick Reference

Format	Example	Use Case
Named	red	Quick prototyping
Hex	#FF0000	Most common, compact
RGB	rgb(255, 0, 0)	Easy to adjust values
RGBA	rgba(255, 0, 0, 0.5)	Transparent colors
HSL	hsl(0, 100%, 50%)	Easy to adjust hue/saturation
HSLA	hsla(0, 100%, 50%, 0.5)	Transparent HSL

---

Best Practices

✅ Do This:

/* Use rgba/hsla for transparency */
background-color: rgba(255, 0, 0, 0.5);

/* Use hex for solid colors (compact) */
color: #007bff;

/* Use hsl for color variations */
background: hsl(200, 80%, 50%);
border-color: hsl(200, 80%, 40%);

/* Use text-shadow for readability on images */
text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);

/* Use opacity for hover effects */
.button:hover { opacity: 0.8; }

❌ Don’t Do This:

/* Don't use too many color formats inconsistently */
h1 { color: red; }
h2 { color: #00F; }
h3 { color: rgb(0, 255, 0); }
/* Use one format consistently */

/* Don't use too low contrast */
color: #999;
background: #fff; /* Hard to read */

/* Don't overuse opacity on text */
opacity: 0.5; /* Might be hard to read */

---

Pro Tip: Use HSL when you need to create color variations (e.g., hover states). HSLA is great for transparent overlays. For solid colors, hex is the most common and compact. For transparency, use rgba or hsla. Always consider contrast and accessibility when choosing colors!

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!