css
  1. css-color
PreviousNext

CSS colors

CSS colors are used to define the color of HTML elements on a web page.

There are several ways to specify colors in CSS, including predefined color names, RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following are the different ways to specify colors in CSS:

  • Color Keywords
  • Hexadecimal (#RRGGBB)
  • RGB (rgb())
  • RGBA (rgba())
  • HSL (hsl())
  • HSLA (hsla())
  • Gradient Backgrounds
  • Variables

Color Keywords:

  • CSS provides a set of predefined color keywords that are easy to remember and use.
  • Examples include red, blue, green, yellow and many more.
.element {
  background-color: red;
  color: white;
}

Hexadecimal (#RRGGBB):

  • Hexadecimal values represent colors by specifying the amount of red (RR), green (GG), and blue (BB) in two-digit hexadecimal numbers (0-FF).

  • This is a widely used format for specifying colors in CSS.

.element {
  background-color: #FFA500; /* Orange */
  color: #333; /* Dark Gray */
}

RGB (rgb()):

  • RGB values represent colors using red, green, and blue values in the range of 0 to 255.
  • This format allows for precise control over color.
.element {
  background-color: rgb(255, 0, 0); /* Red */
  color: rgb(0, 128, 0); /* Green */
}

RGBA (rgba()):

  • RGBA values are similar to RGB but include an additional alpha (A) parameter that controls the opacity of the color.
  • The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).
.element {
  background-color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue */
}

HSL (hsl()):

  • HSL (Hue, Saturation, Lightness) values represent colors by specifying the hue, saturation, and lightness.
  • This format is useful for creating color variations and gradients.
.element {
  background-color: hsl(120, 100%, 50%); /* Green */
}

HSLA (hsla()):

  • HSLA values are similar to HSL but include an alpha parameter for opacity control.
.element {
  background-color: hsla(0, 100%, 50%, 0.7); /* Semi-transparent red */
}

Gradient Backgrounds:

CSS gradients allow you to create smooth transitions between colors.

You can use linear-gradient() and radial-gradient() functions to create gradient backgrounds.

.element {
  background: linear-gradient(to bottom, #FFA500, #FF4500); /* Orange to red gradient */
}

Variables:

Define color variables in your CSS to maintain a consistent color scheme and make it easier to update colors across your website.

:root {
  --primary-color: #3498db;
  --secondary-color: #e74c3c;
}

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Colors Example</title>
    <style>
        body {
            font - family: 'Arial', sans-serif;
            margin: 20px;
        }

        p {
            color: red
        }

        h1 {
            border - radius: 5px;
            font-weight: bold;
            text-transform: uppercase;
            margin: 5px;
        }

        .color-box {
            display: inline-block;
            padding: 5px;
            margin: 5px;
            border-radius: 5px;
            font-weight: bold;
            text-transform: uppercase;
        }

        /* Color Variables */
        :root {
            --primary - color: #3498db;
            /* Blue */
            --secondary-color: #e74c3c;
            /* Red */
        }

        /* Gradient Background */
        .gradient-box {
            background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
            padding: 5px;
            color: white;
        }
    </style>
</head>

<body>
    <p>This paragraph color is red, because in the styles section for p element color added as red </p>
    <div style="background-color: red;">Red</div>
    <div style="background-color: blue;">Orange</div>
    <div style="background-color: green; color: white;">DodgerBlue</div>
    <div style="background-color: yellow;">MediumSeaGreen</div>

    <!-- Hexadecimal -->
    <div class="color-box" style="background-color: #FFA500; color: #333;">Hexadecimal</div>

    <!-- RGB -->
    <div class="color-box" style="background-color: rgb(255, 0, 0); color: rgb(0, 128, 0);">RGB</div>

    <!-- RGBA -->
    <div class="color-box" style="background-color: rgba(0, 0, 255, 0.5);">RGBA</div>

    <!-- HSL -->
    <div class="color-box" style="background-color: hsl(120, 100%, 50%);">HSL</div>

    <!-- HSLA -->
    <div class="color-box" style="background-color: hsla(0, 100%, 50%, 0.7);">HSLA</div>

    <!-- Gradient Background -->
    <div class="gradient-box">
        Gradient Background
    </div>

    <!-- Color Variables -->
    <div class="color-box" style="background-color: var(--primary-color); color: white;">Primary Color</div>
    <div class="color-box" style="background-color: var(--secondary-color); color: white;">Secondary Color</div>
</body>

</html>
Try Playground
CommentsBackground
Published on: