Prev Next

CSS RGB Colors

RGB stands for Red, Green, and Blue. By mixing these three primary colors at varying intensities (ranging from 0 to 255), you can produce any color on the spectrum. You can also use RGBA (RGB with Alpha) to control transparency.

Key Topics

Basic RGB Syntax

The basic syntax for RGB is rgb(red, green, blue), where each value is between 0 and 255.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RGB Example</title>
    <style>
        body {
            background-color: rgb(200, 200, 200);
            font-family: Arial, sans-serif;
        }
        h1 {
            color: rgb(0, 128, 0); /* A medium green */
        }
        p {
            color: rgb(100, 100, 255); /* A soft blue */
        }
    </style>
</head>
<body>
    <h1>Green Heading</h1>
    <p>This paragraph uses an RGB-based blue.</p>
</body>
</html>

Explanation: By adjusting the numeric values for red, green, and blue, you can create millions of unique colors. Experiment by tweaking values to find the perfect hue.

RGBA for Transparency

RGBA allows you to add an Alpha channel (0 to 1) for transparency. For example, rgba(0, 0, 0, 0.5) creates a semi-transparent black overlay.

Experimenting with RGB

Try different combinations of values to find a color that matches your design. Online color pickers and browser developer tools can help you select the right RGB values easily.

Key Takeaways

  • RGB uses numeric values from 0 to 255 to define colors.
  • RGBA adds transparency, allowing you to layer colors smoothly.
  • Experimentation and tools help you find the exact shade you need.
Prev Next