Hexadecimal Color Notation on the Web

Choosing the Right Color Representation

When you begin styling a page, the first color decision usually comes from the design brief: do you want the header to feel sunny, the footer cool, or the call‑to‑action button urgent? In the early days of the web, designers relied on a handful of named colors - red, green, blue - because browsers understood those words automatically. That simplicity vanished once teams started layering brand guidelines, accessibility requirements, and visual nuance on top of the basics. A name like cornflowerblue looks right in a text editor, but a browser may not recognize it if it falls outside the tiny set of legacy names. The safest bet for a pixel‑perfect shade is the RGB triplet or its hexadecimal counterpart.

RGB stands for red, green, and blue. The web treats each color component as an integer between 0 and 255, so rgb(100, 149, 237) renders a soft cornflower blue. Using the rgb() function in inline styles or within a stylesheet guarantees that every browser will produce the same result. However, when you need to embed a color directly into an HTML attribute - say, in a legacy email template that doesn't parse CSS - HTML itself doesn't understand the rgb() syntax. Instead, the only notation the markup layer accepts is the six‑character hexadecimal value prefixed with a hash sign.

The hex format compresses the same three numbers into a short string. Each pair of digits represents one color component, written in base‑16 notation. In this system, digits 0‑9 retain their usual meaning, while letters A‑F cover the values 10‑15. For instance, the decimal 100 equals hex 64, 149 equals 95, and 237 equals ED. Concatenating those pairs gives #6495ED. Browsers read that code as the same cornflower blue produced by the RGB triplet. Because the hex form is compact and universal, it remains the go‑to choice for static HTML and for CSS declarations that must remain in a single line.

Converting Between Decimal and Hexadecimal for Web Design

Anyone who has ever worked with color swatches or design tools knows that you can almost always find the RGB values for a shade, but those values are given in decimals. To write them into HTML, you need to translate each number into hexadecimal. While a calculator makes the job trivial, understanding the pattern helps you spot mistakes and speeds up the workflow. The key is to remember that each hex digit stands for a 4‑bit chunk, so two digits together cover the full 8‑bit range of 0–255.

Start by converting each decimal component separately. For example, 100 divided by 16 equals 6 with a remainder of 4; the quotient 6 becomes the first hex digit, and the remainder 4 becomes the second. Thus 100 becomes 64 in hex. A similar process turns 149 into 95: 149 ÷ 16 = 9 remainder 5. Finally, 237 ÷ 16 = 14 remainder 13; 14 maps to the letter E, and 13 to D, giving ED. If you write out the steps, the conversion becomes a quick mental math exercise: just keep track of the division by 16 and the remainders.

To avoid hand‑calculating every time, many designers rely on online tools or build a small helper in JavaScript. The script below accepts a decimal value, clamps it to the 0‑255 range, and returns a two‑digit hex string. You can paste this snippet into the console of any browser, or include it in a utility library if you prefer. Notice how the function uses toString(16) to perform the base conversion, then pads the result so that single‑digit values become 0x prefixed, preserving the exact six‑character format needed for CSS.