Kenhuang Academy
  • English

      • 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:

      color: colorname;

      Example:

      <!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:

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

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

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

      Example:

      <!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:

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

      Example:

      <!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:

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

      Example:

      <!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:

      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:

      <!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:

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

      Example:

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

      Color Properties

      color Property

      Sets text color.

      p {
    color: #333;
}

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

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

      background-color Property

      Sets background color.

      body {
    background-color: #f5f5f5;
}

.card {
    background-color: white;
}

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

      border-color Property

      Sets border color.

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

.warning {
    border-color: orange;
}

      Color Comparison Table

      MethodExampleAdvantagesDisadvantages
      Color NamesredEasy to read and rememberLimited choices
      Hexadecimal#FF5733Widely supported, conciseNot intuitive
      RGBrgb(255, 87, 51)Intuitive, easy to understandLonger code
      RGBArgba(255, 87, 51, 0.5)Supports transparencyLonger code
      HSLhsl(9, 100%, 60%)Easy to adjust hue/saturation/lightnessLess intuitive
      HSLAhsla(9, 100%, 60%, 0.5)Supports transparency, easy to adjustLongest code

      Practical Color Examples

      Common Color Schemes

      <!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

      .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%
    );
}