Color Picker

When you first start creating technology applications, one of the simplest ways to make your user interface (UI) feel more polished is by adding color. Colors bring hierarchy, emphasis, and personality to an otherwise plain layout. One of the most common ways to define color is through hexadecimal values, often referred to as hex colors.

Hex colors are six-digit codes that represent the intensity of red, green, and blue in a color. The term “hex” is short for hexadecimal, a base-16 number system. If you want a deeper understanding of how that works, I wrote a more detailed explanation here: Understanding Hexadecimal. They are written with a leading hashtag followed by six characters, such as #1a73e8 or #ff5733. The structure is straightforward once you understand it. The first two characters represent red, the next two represent green, and the final two represent blue. Each pair ranges from 00 to FF in hexadecimal, which corresponds to 0 through 255 in decimal.

For example, if you wanted to make the background of a webpage a soft blue, you could write:

<body style="background-color: #e6f2ff;">

Or more commonly in CSS:

body {
    background-color: #e6f2ff;
}

Hex colors are especially useful because they are concise and widely supported across all browsers. Once you start recognizing common patterns, you can even “read” colors directly from their hex values. For instance, anything starting with #ff will have a strong red component, while values ending in ff tend to emphasize blue.

If you are unsure what colors to use, a great place to experiment is HTML Color Codes color picker. Tools like this allow you to visually select a color and immediately see its corresponding hex value, making it easy to build a consistent color palette.

Another common way to define colors in CSS is using RGB values. RGB stands for red, green, and blue, and instead of hexadecimal notation, it uses decimal numbers ranging from 0 to 255. The same soft blue example could be written as:

body {
    background-color: rgb(230, 242, 255);
}

Both approaches produce the same result and can represent the same color model.

That said, I much prefer using hex colors in practice. They are shorter to write, easier to copy and paste, and more common in design tools and color pickers. When you are collaborating with designers or pulling colors from tools like Figma or Adobe products, you will almost always be given hex values.

As you continue building applications, you will find that choosing and applying colors is not just a technical skill but also a design decision. Starting with hex colors gives you a simple, efficient way to control the visual identity of your projects without adding unnecessary complexity.