HTML Colors: How to add Color to your Web Page

Colors are applied to an HTML element using CSS. You can also pick which part of the element to apply color to.

We’ve just seen the various ways of applying styles to an HTML document. Some of those examples included adding color to the document. Seeing as color is a major part of any website design, let’s look more closely at applying color to a web page.

Foreground Color

Foreground color is used to change the color of an element’s text.

Foreground color is specified like this color:orange; .

Foreground color can also (indirectly) affect the color of other parts of the element, including its border.

This may or may not be the desired effect. However, it can always be overridden by explicitly specifying a color for the affected property.

Try this

Below is an example where a border is specified, along with its color.

Remove border-color:olivedrab; from the styles, then click Run to see how it changes the color of the border.

Background Color

Background color is specified like this: background-color:yellow

Border Color

We’ve already seen an example of specifying a color for an element’s border (above). That’s one way of specifying the various border properties.

You can also specify several border properties in one go (rather than separating them into different declarations). You can do this using the border shortcut property, which allows you to specify the border’s width, style, and color in one place.

Embedded and External Styles

The examples on this page use inline styles. As with all styles, you can also use the embedded method or the external method.

Color Names

In the above examples, I used color names to specify the colors.

You can specify a color by its name (eg, blue ), its hexadecimal value (eg, #0000ff ), RGB value (eg rgb(0,0,255) ), or its HSL value (eg hsl(240,100%,100%) ).

Beginners may find it easier to specify colors by their color name, as color names are probably a lot easier to remember than the other options. Although color names are easier to remember, the hexadecimal, RGB, and HSL notations provide you with more color options.

Hexadecimal color codes are a combination of letters and numbers. The numbers go from 0 to 9 and the letters go from A to F. When using hexadecimal color values in your HTML/CSS, you precede the value with a hash (#). Although hexadecimal values may look a little weird at first, you’ll soon get used to them.

If you use graphics software, such as Adobe Photoshop or GIMP, you might be used to the RGB or HSL methods.

The chart below shows some examples of color names, along with their corresponding hexadecimal and RGB values.

Color Name	Hex Code RGB	Decimal Code RGB
Black	000000	0,0,0
Silver	C0C0C0	192,192,192
Gray	808080	128,128,128
White	FFFFFF	255,255,255
Maroon	800000	128,0,0
Red	FF0000	255,0,0

Color Name	Hex Code RGB	Decimal Code RGB
Purple	800080	128,0,128
Fuchsia	FF00FF	255,0,255
Green	008000	0,128,0
Lime	00FF00	0,255,0
Olive	808000	128,128,0
Yellow	FFFF00	255,255,0

Color Name	Hex Code RGB	Decimal Code RGB
Navy	000080	0,0,128
Blue	0000FF	0,0,255
Teal	008080	0,128,128
Aqua	00FFFF	0,255,255

This table is a small sample of the enormous range of colors available in HTML. To see more, check out HTML Color Codes.

You can make up your own colors by simply entering any six digit hexadecimal value (preceded by a hash).

In the following example, we specify the same color using three different methods. The resulting color is the same.

If we wanted to change to a different shade of blue, we could change our value slightly like this:

Transparency

You can also use alpha to specify the level of opacity the color should have. This is only available on RGB and HSL notations. To do this, add the letter «a» to the functional notation (i.e. RGBA and HSLA ). For example, rgba(0,0,255,0.5) results in a semi-transparent blue, as does hsla(240, 100%, 50%, 0.5) .

Here’s an example of using RGBA to change the opacity.

Here’s an example of using HSLA to change the opacity.

Choosing Colors — The Easy Way

By using hexadecimal, RGB, or HSL notation, you have a choice of over 16 million different colors. For example, you can start with #000000 and increment by one value all the way up to #FFFFFF . Each different value represents a slightly different color.

But don’t worry — you won’t need to remember every single hexadecimal color value! The HTML color picker and color chart make it easy for you to choose colors for your website.

Related

Источник

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Background Color

You can set the background color for HTML elements:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Ut wisi enim.

Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

Example

Hello World

Hello World

Hello World

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three elements have their background color set with RGB, HEX, and HSL values:

The following two elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):

Источник

Color keywords

Note: As of [CSS Color], the CSS2 System Color values have been deprecated in favor of the CSS3 UI ‘[appearance]’ property.

• ActiveBorder
  Active window border.

• ActiveCaption
  Active window caption.

• AppWorkspace
  Background color of multiple document interface.

• Background
  Desktop background.

• ButtonFace
  The face background color for 3-D elements that appear 3-D due to one layer of surrounding border.

• ButtonHighlight
  The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border.

• ButtonShadow
  The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border.

• ButtonText
  Text on push buttons.

• CaptionText
  Text in caption, size box, and scrollbar arrow box.

• GrayText
  Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.

• Highlight
  Item(s) selected in a control.

• HighlightText
  Text of item(s) selected in a control.

• InactiveBorder
  Inactive window border.

• InactiveCaption
  Inactive window caption.

• InactiveCaptionText
  Color of text in an inactive caption.

• InfoBackground
  Background color for tooltip controls.

• InfoText
  Text color for tooltip controls.

• Menu
  Menu background.

• MenuText
  Text in menus.

• Scrollbar
  Scroll bar gray area.

• ThreeDDarkShadow
  The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

• ThreeDFace
  The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

• ThreeDHighlight
  The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

• ThreeDLightShadow
  The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

• ThreeDShadow
  The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

• Window
  Window background.

• WindowFrame
  Window frame.

• WindowText
  Text in windows.

Источник

An Introduction to HTML Colors

Colors are an essential part of any web page. It gives a good look and feel to your website. There are more than 200 colors which are accepted by a browser. In this HTML colors article, we’ll discuss the various colors and methods by which we can include them on our web page.

HTML Color Coding Methods

There are mainly three types of methods to the set colors on your web page, they are as follows:

Color Names

You can directly specify a color name to set the text or background color.
Here’s the list of 12 standard color names.

There are over 200 different color names supported by the web browser.

Let’s make a web page to understand the working of colors.

This will produce the following result.

Hex Codes

A hexadecimal code is a six-digit representation of a color. It is represented in #RRGGBB format, where (RR) represents the red value, (GG) represents the green value, and (BB) represents the blue value.

Here’s an example to explain the hex code.

This will produce the following result.

RGB values

An RGB color represents RED, GREEN, and BLUE light sources. It is represented as
RGB(red, green, blue).

The following are the few colors with RGB value.

Here’s an example to understand how RGB colors work.

This will produce the following result.

Here’s How to Land a Top Software Developer Job

HSL Color Values

HSL stands for hue, saturation, and lightness. In HTML, color can be specified using an HSL value.

HSL(Hue, Saturation, Lightness)

Hue is measured in degrees of the color circle ranging from 0 to 360 degrees (red=0°, blue=120°, green=240°). Saturation is measured in percent (100% full saturation, 0% shade of gray). Lightness is also measured in percent (100% is white, 0% is black, 50% is normal).

Let’s look at some primary colors with their HSL values.

Let’s change our paragraph background to orange by adding HSL value.

This will change our paragraph background color to orange.

HTML Color Picker

The defines an input field for the color picker. Let’s see how we can make a color picker.

This will produce the following result.

Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master’s Program. Click to check out the program details!

Next Steps

We hope that this article on HTML colors helped you to understand color attributes and different ways in which we can set the colors. We discussed several color codes and how we can change the background and text colors. But to learn more about web development in its entirety, certification is highly recommended and could act as a catalyst for your coding career.

Simplilearn’s Full Stack Java Developer will help you master the world of web development. The course will give you the essence of front-end, middleware, and back-end Java web developer technologies. You will learn to build an end-to-end application, test and deploy code, store data using MongoDB, and much more.

If you have any questions or feedback, let us know in the comments section. Our experts will get back to you immediately.

About the Author

Aryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

Recommended Programs

Full Stack Java Developer Job Guarantee Program

Источник