HTML Colors

The style attribute helps us decorate HTML elements. How can the HTML attributes like style modify text color? For that purpose, we have a CSS color property. In the example, the attribute style="color:blue;" tells the browser that the element should be blue. The color here is a CSS property, while blue is its value.

Stick to the standard HTML and CSS syntax to display changes properly:

• An equals sign (=) after style

• A colon (:) to separate the two parts

• Quotation marks (" ") to wrap the color property

• A semicolon (;) after the CSS value

Let's say you need to put some colored background beneath your text. Here comes another CSS property — the background-color. The syntax is the same as that of the text color property: style="background-color:powderblue;". Instead of powderblue value, you can insert any color name or its RGB, HSL, HEX, RGBA, or HSLA value.

Like the CSS properties for text color and background color, the border property also falls under the umbrella of the style attribute. You can set the border style, width, and color — the order matters — and those settings will apply to all border sides. For example, the syntax can be written as follows: style="border:solid 4px blue;".

HTML supports 140 standard color names that you can use to adjust the elements' colors in your code. Those colors are a safe bet as all browsers support and display them correctly. For a more comfortable search, you can go to the HTML Color Picker developed by W3C Schools.^[1] It provides a clear HTML color system organized by categories and allows users to search the color by clicking and dragging the cursor inside the picker area. Users can also find the right color by specifying the HEX, RGB, or HSL codes.

Just like people, colors have names and "ID numbers." RGB color system constructs colors by blending three hues of light (red, green, and blue) and defines their digital values. Simply put, each hue adjusts the intensity of the color with a value ranging between 0 and 255.^[2] For example, the color with RGB (255, 0, 0) will appear purely red because we set red to its highest value (255) and the other two (green and blue) — to 0. For example, to specify the background color for a headline using the RGB model, you should follow the syntax: <h1 style="background-color:rgb(32, 178, 170);">...</h1>.

HEX triplet is another format for describing HTML colors. Like RGB, HEX triplet defines colors by the amount of red, green, and blue. However, instead of decimal notation (from 0 to 255), it uses a three-byte hexadecimal number where each byte is a value in the range 00 to FF.^[3] The first byte corresponds to red, the second byte to green, and the third one to blue.

HEX codes are more compact and improve the load time of a web page slightly. Plus, in contrast to RGB, they're easier to copy and share. In code, you should write it like this: style="color:#ff6347;".

HSL is another color model to represent colors. However, HSL might be more human-friendly since it uses parameters that explain how we actually perceive colors. HSL stands for hue, saturation, and lightness, respectively.^[4] Hue takes value from 0 to 360, while the other two parameters vary from 0% to 100%. This color model allows designers to fine-tune colors, make them more intense, increase the saturation, making it lighter or darker, and adjust the lightness.

RGBA color system is an extension of RGB with an extra parameter — an alpha channel that sets the opacity for a color. Alpha can vary from 0.0 (fully transparent) and 1.0 (not transparent at all). So, if we set the lowest value, the color will be fully transparent. If we change the Alpha parameter to 1, the color will appear solid and entirely opaque. The syntax for RGBA color model will vary only slightly: style="color:rgba(255, 99, 71, 0.5);".

HSLA is a modified HSL version with an Alpha parameter for opacity. It ranges between 0.0 (fully transparent) and 1.0 (not transparent at all). In code, use the hsla() functional notation to set values: style="color: hsla(360,80%,50%,0.5);". A quick reminder — avoid any spacing in between characters.

In HTML, the RGB color model specifies how much red, green, and blue the color contains. The intensity ranges from 0 to 255, and that means there are 256 x 256 x 256 = 16777216 possible colors! Quite enough to provide visual aesthetics and communicate the idea to your users, right?

There are several gray color names in HTML/CSS, and all gray colors are spelled as gray (not grey). The HTML color "Gray" goes under the RGB code 128,128,128. Surprisingly, among HTML's fifty shades of gray, the color Gray is actually darker than DarkGray (169,169,169)!

In RGB abbreviation, "R" stands for red. The color pure red is a result of keeping the green and blue light at zero and setting the R parameter to its highest value of 255. Don't go too far with unsaturated opaque colors, especially red. They may cause severe eye pain, headaches, and even trigger epileptic seizures.

To display black, you should reduce red, green, and blue to their lowest values — RGB (0, 0, 0). The good news is that the HEX code is a combination of zeros: #000000.

Pure black is an intense color and overpowers the rest of the colors on a page. We recommend replacing it with dark gray for text on a white background to reduce overstimulating the retina and allow users to read comfortably for a longer time.

To display white, we should set all parameters to the highest values of 255.

In design, white sets a neutral scenery, allowing other colors to stand out and capture attention. Besides, users usually associate white with cleanliness and simplicity, making it ideal for minimalist designs.