CSS Colors

Colors in CSS can be specified in several ways: with predefined names (e.g., red), HEX codes (e.g., #ff0000), RGB, HSL values, or by adding transparency (RGBA, HSLA). These values are used for text color (color) and background color (background-color).

The background-color property sets the background color of an element. The background extends over the entire content of the element, including padding and borders, but does not extend over the margin. The color property sets the text color within the element content. Both properties allow choosing colors using color names, as well as RGB, HEX, HSL, RGBA, or HSLA values.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Colors</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        .container {
    display: flex;
    flex-wrap: wrap;
            border: 1px solid black;
            margin-bottom: 10px;
        }
        .box {
    width: 200px;
            margin: 10px;
            padding: 10px;
            display: flex;
            align-items: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box" style="color: black; background: white;
    border: 1px solid black;">BLACK TEXT</div>
    <div class="box" style="color: white; background: black;">WHITE TEXT</div>
    <div class="box" style="color: blue;
    border: 1px solid black;">BLUE TEXT</div>
    <div class="box" style="color: red;
    border: 1px solid black;">RED TEXT</div>
    <div class="box" style="color: orange;
    border: 1px solid black;">ORANGE TEXT</div>
    <div class="box" style="color: yellow; background: black;">YELLOW TEXT</div>
    <div class="box" style="color: green;
    border: 1px solid black;">GREEN TEXT</div>
    <div class="box" style="color: gray;
    border: 1px solid black;">GRAY TEXT</div>
    <div class="box" style="color: brown;
    border: 1px solid black;">BROWN TEXT</div>
    <div class="box" style="color: purple;
    border: 1px solid black;">PURPLE TEXT</div>
    <div class="box" style="color: pink; background: black;">PINK TEXT</div>
</div>

<div class="container">
    <div class="box" style="background: black; color: white;">BLACK BACKGROUND</div>
    <div class="box" style="background: white; color: black;
    border: 1px solid black;">WHITE BACKGROUND</div>
    <div class="box" style="background: blue; color: white;">BLUE BACKGROUND</div>
    <div class="box" style="background: red; color: black;">RED BACKGROUND</div>
    <div class="box" style="background: orange; color: black;">ORANGE BACKGROUND</div>
    <div class="box" style="background: yellow; color: black;">YELLOW BACKGROUND</div>
    <div class="box" style="background: green; color: white;">GREEN BACKGROUND</div>
    <div class="box" style="background: gray; color: white;">GRAY BACKGROUND</div>
    <div class="box" style="background: brown; color: white;">BROWN BACKGROUND</div>
    <div class="box" style="background: purple; color: white;">PURPLE BACKGROUND</div>
    <div class="box" style="background: pink; color: black;">PINK BACKGROUND</div>
</div>
</body>
</html>

RESULT

Quick CSS Color Picker

Choosing the right colors is crucial for a good appearance when designing websites. Below, you can click on the color field to open a palette and select any shade. The tool will immediately display the HEX and RGB codes, which you can easily copy into your CSS file. This saves you time, as you do not need to guess values or use external programs.

RESULT

Format	Example	Description
Color Names
`color name`	`color: red;`	Predefined color names (140+ names, e.g. red, blue, green)
`transparent`	`background-color: transparent;`	Fully transparent color
`currentColor`	`border-color: currentColor;`	Uses the current value of the element's color property
HEX (Hexadecimal)
`#rrggbb`	`color: #ff0000;`	Full HEX code – rr (red), gg (green), bb (blue)
`#rgb`	`color: #f00;`	Short HEX code (same as #rrggbb)
`#rrggbbaa`	`color: #ff000080;`	HEX code with transparency – aa (alpha)
RGB / RGBA
`rgb(r, g, b)`	`color: rgb(255, 0, 0);`	Red (0–255), Green (0–255), Blue (0–255)
`rgba(r, g, b, a)`	`color: rgba(255, 0, 0, 0.5);`	RGB with transparency – a (0 = transparent, 1 = opaque)
HSL / HSLA
`hsl(h, s%, l%)`	`color: hsl(0, 100%, 50%);`	Hue (0–360°), Saturation (0–100%), Lightness (0–100%)
`hsla(h, s%, l%, a)`	`color: hsla(0, 100%, 50%, 0.5);`	HSL with transparency – a (0 = transparent, 1 = opaque)
Color Properties
`color`	`color: #333;`	Sets the text color
`background-color`	`background-color: #f0f0f0;`	Sets the background color of an element
`border-color`	`border-color: red;`	Sets the border color of an element
`opacity`	`opacity: 0.5;`	Sets the transparency of the entire element (0–1)

CSS Colors

Quick CSS Color Picker

Vadnica.org

Links

Support