Background Colour Code In Html

MUAZHAN

5 min read

·

Jul 03, 2024

30

Share

Background Color Code in HTML

The background color of an HTML element can be set using the background-color property within the style attribute. This property accepts color values in various formats. Here's a breakdown:

Color Names

HTML supports a set of predefined color names. You can use these names directly within the style attribute:

This heading has a red background

Here are some commonly used color names:

• red
• green
• blue
• black
• white
• yellow
• cyan
• magenta
• pink
• gray

Hexadecimal Color Codes

Hexadecimal color codes are the most common way to specify colors in HTML. They consist of six hexadecimal digits (0-9 and A-F), grouped as three pairs, representing the red, green, and blue (RGB) components of the color.

• #RRGGBB: where RR represents the red component, GG represents the green component, and BB represents the blue component.
• Each pair ranges from 00 to FF (0-255 in decimal).
• Example: #FF0000 represents pure red, #00FF00 represents pure green, and #0000FF represents pure blue.

This paragraph has a light pink background

RGB Color Values

RGB color values are another way to specify colors, using decimal values for each of the red, green, and blue components.

• rgb(R, G, B): where R, G, and B represent the red, green, and blue components respectively.
• Each component ranges from 0 to 255.
• Example: rgb(255, 0, 0) represents pure red, rgb(0, 255, 0) represents pure green, and rgb(0, 0, 255) represents pure blue.

This div has a purple background

HSL Color Values

HSL stands for hue, saturation, and lightness. It's a more intuitive way to specify colors, allowing you to adjust the hue (color shade), saturation (color intensity), and lightness (brightness) independently.

• hsl(H, S%, L%): where H represents the hue (0-360 degrees), S represents the saturation (0%-100%), and L represents the lightness (0%-100%).
• Example: hsl(0, 100%, 50%) represents pure red, hsl(120, 100%, 50%) represents pure green, and hsl(240, 100%, 50%) represents pure blue.

This span has a light blue background

Choosing the Right Method

• Color Names: Useful for common, basic colors.
• Hexadecimal Color Codes: Most commonly used method, compact, and readily available in design tools.
• RGB Color Values: Good for programmatic color manipulation.
• HSL Color Values: Offers a more intuitive way to adjust color attributes.

You can explore and experiment with different color values to create the desired look and feel for your website. Remember that color choices can greatly impact the overall user experience, so choose wisely and consider accessibility guidelines.