Prev Next

CSS HEX Colors

HEX colors are represented by a 6-digit hexadecimal number preceded by a #. Each pair of digits corresponds to the intensity of red, green, and blue (from 00 to FF). HEX is a popular format due to its compactness and familiarity, making it easy to share and standardize colors.

Key Topics

Basic HEX Syntax

A HEX color looks like #RRGGBB. For example, #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>HEX Colors Example</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: #FF5733; /* A bright reddish-orange */
        }
        p {
            color: #337AFF; /* A vibrant blue */
        }
    </style>
</head>
<body>
    <h1>Heading in HEX Color</h1>
    <p>This text uses a HEX value for its color.</p>
</body>
</html>

Explanation: HEX codes are compact and widely used. By changing the hexadecimal values, you can quickly fine-tune colors. Tools like color pickers make finding the right HEX code simple.

Short HEX Notation

If a HEX code repeats pairs of digits (e.g., #FF0000 = #F00), you can use a shorter, three-digit form. This shorthand is quicker but less commonly used in modern workflows.

Finding HEX Values

HEX codes are commonly provided in design mockups, style guides, and brand materials, making them a standard choice in professional workflows.

Key Takeaways

  • HEX uses hexadecimal values to represent colors compactly.
  • It’s a common choice in branding and design projects.
  • Short HEX notation offers a concise form but is optional.
  • Color pickers and tools easily convert between RGB, HEX, and HSL.
Prev Next