- HTML Colors
- Specifying Colors in HTML
- Named Colors
- Hexadecimal Colors
- RGB Colors
- RGBA Colors
- HTML Colors
- Color Names
- Background Color
- 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): Источник 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 Источник
- Text Color
- Hello World
- 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): Источник 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 Источник
- Border Color
- 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): Источник 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 Источник
- 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): Источник 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 Источник
- 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): Источник 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 Источник
- Color Values
- HTML Colors: How to add Color to your Web Page
- Foreground Color
- Try this
- Background Color
- Border Color
- Embedded and External Styles
- Color Names
- Transparency
- Choosing Colors — The Easy Way
- Related
HTML Colors
Colors are an essential part of any website’s design. They can be used to set the mood, highlight important content, and make the overall user experience more visually appealing. This tutorial will teach you how to use colors in HTML, specify colors using different methods, and apply colors to different tags on a web page.
Specifying Colors in HTML
There are three main ways to specify colors in HTML: using a named color, a hexadecimal value, or an RGB value. Let’s take a closer look at each of these methods.
Named Colors
The most common method is to use a named color, which refers to a predefined color value with a name. There are 147 named colors in HTML, including basic colors like » red » and » blue ,» as well as more obscure colors like » papayawhip » and » slategray .» To use a named color, specify the name of the color as the value of the relevant style property.
Here is a list of named colors with their representation that HTML and CSS recognize:
Hexadecimal Colors
Another way to specify colors in HTML is to use a hexadecimal code, a six-digit code representing a specific color. Hexadecimal codes consist of three pairs of digits, each representing a value for the colors red, green, and blue (RGB). For example, the hexadecimal code for the color red is #FF0000 , with FF representing the maximum value for red , and 00 representing the minimum value for green and blue . To use a hexadecimal code, specify the code as the value of the relevant style property, preceded by a # symbol.
RGB Colors
In addition to named and hexadecimal codes, colors can be specified in HTML using the RGB model, representing colors as combinations of red, green, and blue values. The RGB model is particularly useful for specifying colors with greater precision, as it allows you to specify a value for each color on a scale from 0 to 255 . The rgb() function defines the RGB model, which takes three arguments representing red, green, and blue values.
RGBA Colors
The rgba() function is similar to the rgb() function except that it includes an additional argument for alpha transparency. The alpha value specifies the degree of transparency of the color, with 0 being fully transparent and 1 being fully opaque.
This text is red with 50% transparency. 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):
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.