Color schemes in HTML

Color schemes in HTML are used to define the visual appearance of web pages by specifying colors for various elements like text, backgrounds, borders, and more.

These colors can be defined using different methods such as color names, hexadecimal values, RGB, RGBA, HSL, and HSLA.


Color Names

HTML supports 140 color names that can be directly used in your code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Color Names Example</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
        }
        p {
            color: green;
        }
    </style>
</head>
<body>
    <h1>Color Names</h1>
    <p>This paragraph uses color names for styling.</p>
</body>
</html>


Hexadecimal Values

Hexadecimal values are six-digit codes that represent colors. They start with a # followed by three pairs of characters representing red, green, and blue (RGB) components.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hexadecimal Colors Example</title>
    <style>
        body {
            background-color: #ADD8E6; /* lightblue */
        }
        h1 {
            color: #000080; /* navy */
        }
        p {
            color: #008000; /* green */
        }
    </style>
</head>
<body>
    <h1>Hexadecimal Colors</h1>
    <p>This paragraph uses hexadecimal values for styling.</p>
</body>
</html>


RGB (Red, Green, Blue)

RGB values specify colors using the red, green, and blue components, each ranging from 0 to 255.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RGB Colors Example</title>
    <style>
        body {
            background-color: rgb(173, 216, 230); /* lightblue */
        }
        h1 {
            color: rgb(0, 0, 128); /* navy */
        }
        p {
            color: rgb(0, 128, 0); /* green */
        }
    </style>
</head>
<body>
    <h1>RGB Colors</h1>
    <p>This paragraph uses RGB values for styling.</p>
</body>
</html>


RGBA (Red, Green, Blue, Alpha)

RGBA is an extension of RGB that includes an alpha channel for opacity, with values ranging from 0 (completely transparent) to 1 (completely opaque).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RGBA Colors Example</title>
    <style>
        body {
            background-color: rgba(173, 216, 230, 0.5); /* lightblue with 50% opacity */
        }
        h1 {
            color: rgba(0, 0, 128, 1); /* navy */
        }
        p {
            color: rgba(0, 128, 0, 1); /* green */
        }
    </style>
</head>
<body>
    <h1>RGBA Colors</h1>
    <p>This paragraph uses RGBA values for styling.</p>
</body>
</html>


HSL (Hue, Saturation, Lightness)

HSL values define colors using hue (0-360), saturation (0%-100%), and lightness (0%-100%).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HSL Colors Example</title>
    <style>
        body {
            background-color: hsl(195, 53%, 79%); /* lightblue */
        }
        h1 {
            color: hsl(240, 100%, 25%); /* navy */
        }
        p {
            color: hsl(120, 100%, 25%); /* green */
        }
    </style>
</head>
<body>
    <h1>HSL Colors</h1>
    <p>This paragraph uses HSL values for styling.</p>
</body>
</html>


HSLA (Hue, Saturation, Lightness, Alpha)

HSLA is an extension of HSL that includes an alpha channel for opacity.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HSLA Colors Example</title>
    <style>
        body {
            background-color: hsla(195, 53%, 79%, 0.5); /* lightblue with 50% opacity */
        }
        h1 {
            color: hsla(240, 100%, 25%, 1); /* navy */
        }
        p {
            color: hsla(120, 100%, 25%, 1); /* green */
        }
    </style>
</head>
<body>
    <h1>HSLA Colors</h1>
    <p>This paragraph uses HSLA values for styling.</p>
</body>
</html>


Using CSS Variables for Color Schemes

CSS variables (custom properties) allow you to create a more maintainable color scheme.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Variables Example</title>
    <style>
        :root {
            --main-bg-color: lightblue;
            --main-text-color: navy;
            --secondary-text-color: green;
        }
        body {
            background-color: var(--main-bg-color);
        }
        h1 {
            color: var(--main-text-color);
        }
        p {
            color: var(--secondary-text-color);
        }
    </style>
</head>
<body>
    <h1>CSS Variables</h1>
    <p>This paragraph uses CSS variables for styling.</p>
</body>
</html>

In this example, CSS variables are defined within the :root selector, and then used throughout the stylesheet.

This approach simplifies updating and maintaining the color scheme.