Change HTML Background Color Or Font Color - BitDegree

Trang chủ » Html Color Text Background » Change HTML Background Color Or Font Color - BitDegree

Có thể bạn quan tâm

TL;DR – HTML colors can be defined in a name, RGB, RGBA, HEX, HSL or HSLA value and applied to either the background or the text.

Contents

  • 1. Defining HTML Colors
  • 2. HTML Color: Text or Background
  • 3. Ways to Define Color
  • 3.1. Name
  • 3.2. RGB and RGBA Values
  • 3.3. HEX Value
  • 3.4. HSL and HSLA Values
  • 4. HTML Color: Useful Tips

Defining HTML Colors

There is no special HTML color tag, as design is not the main function of HTML. Coloring your website is a part of CSS inline styling. This means you need to use the style attribute in the opening tag you wish to add HTML color to.

You may use the color property to change the color of your text, or background-color to change the color of the background. Both of these properties take color names, RGB, RGBA, HEX, HSL or HSLA values.

HTML Color: Text or Background

There are a couple of properties you can use to define color – HTML background-color and HTML color. As the name suggests, the first one is used to change the color of the background. By using the simple color property, you will change the color of the text.

Both HTML background color and color properties can take values defined in names, RGB, RGBA, HEX, HSL or HSLA values.

Powderblue RGB(176,224,230) RGBA(176, 224, 230, 1)

#B0E0E6 HSL(187, 52%, 80%) HSLA(187, 52%, 80%, 1)

It's important to note that the background-color property provides a color for the background of the text, but not for the whole document. If you wish to change the HTML color for the whole page, you should use the bgcolor attribute in the opening tag of the <body> section:

Example Copy <body bgcolor="#def28d"> <h2 style="color: #731768;"> I am using HEX codes to assign colors to this text and to the whole document </h2> Try it Live Learn on Udacity

Note: added in the <body> section, the bgcolor attribute does not support RGB values. Use either a color name or a HEX value.

Ways to Define Color

Name

The color name depicts the specific name for the HTML color. There are 140 color names supported in CSS, and you can use any of them for your elements. For example, you can simply use red to define HTML red:

red Example Copy <h2 style="color: pink;"> I am using a color name to assign a color to this text </h2> <h2 style="background-color: steelblue;"> I am using a color name to assign a color to this background </h2> <h2 style="background-color: brown; color: bisque;"> I am using a color name to assign a color to this background and text </h2> Try it Live Learn on Udacity

DataCamp Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
GET 50% OFF Udacity Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
UP TO 70% OFF edX Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion
FREE COURSES

RGB and RGBA Values

The RGB value defines HTML color by mixing red, green, and blue values. The first number describes the red color input, the second – the green color input, and the third one – the blue color input.

The value of each color can vary from 0 to 255. For example, to get the same HTML red you saw in previous section, we would have to use RGB(255,0,17):

RGB(255,0,17) Example Copy <h2 style="color: rgb(252, 156, 249);"> I am using RGB codes to assign a color to this text </h2> <h2 style="background-color: rgb(255, 236, 139);"> I am using RGB codes to assign a color to this background </h2> <h2 style="color: rgb(255, 236, 139); background-color: rgb(143, 188, 143);"> I am using RGB codes to assign a color to this background and text </h2> Try it Live Learn on Udacity

While RGBA values are very similar, they have one more value in the mix. The additional fourth value A stands for alpha and represents the opacity. It can be defined in a number from 0 (not transparent) to 1 (completely transparent):

Example Copy <h2 style="color: rgba(252, 156, 249, 0.25);"> RGBA values let you set custom opacity - compare these two lines </h2> <h2 style="color: rgba(252, 156, 249, 0.75);"> RGBA values let you set custom opacity - compare these two lines </h2> Try it Live Learn on Udacity

HEX Value

HEX color value works pretty similarly to RGB but looks different. When you define HEX, the code contains both numbers from 0 to 9 and letters from A to F to describe the intensity of the color. The first two symbols determine red intensity, the two in the middle - green intensity, and the last two - blue intensity.

For example, to get a simple HTML blue, we would use the code #0000fe:

#0000fe Example Copy <h2 style="color: #FC9CF9;"> I am using HEX codes to assign a color to this text </h2> <h2 style="background-color: #FFEC8B;"> I am using HEX codes to assign a color to this background </h2> <h2 style="color: #B0E0E6; background-color: #ACAFFF;"> I am using HEX codes to assign a color to this background and text </h2> Try it Live Learn on Udacity

HSL and HSLA Values

In HTML, colors can also be defined in HSL values. HSL stands for hue, saturation and lightness:

  • Hue is defined in degrees from 0 to 360. On a color wheel, red is around 0/360, green is at 120 and blue is at 240.
  • Saturation is defined in percentages from 0 (black and white) to 100 (full color).
  • Lightness is defined in percentages from 0 (black) to 100 (white).

For example, to color the background in HTML blue, you could use hsl(240, 100%, 50%):

hsl(240, 100%, 50%) Example Copy <h2 style="color: hsl(217, 97%, 57%);"> I am using HSL codes to assign a color to this text </h2> <h2 style="background-color: hsl(218, 77%, 88%);"> I am using HSL codes to assign a color to this background </h2> <h2 style="color: hsl(38, 95%, 25%); background-color: hsl(38, 77%, 88%);"> I am using HSL codes to assign a color to this background and text </h2> Try it Live Learn on Udacity

Just like in RGBA, the fourth value A in HSLA values stands for alpha and represents the opacity which defined in a number from 0 to 1:

Example Copy <h2 style="color: hsla(128, 95%, 25%, 0.25);"> HSLA values let you set custom opacity - compare these two lines </h2> <h2 style="color: hsla(128, 95%, 25%, 0.75);"> HSLA values let you set custom opacity - compare these two lines </h2> Try it Live Learn on Udacity

HTML Color: Useful Tips

  • Using a simple color picker will help you get the exact RGB or HEX values of the HTML color you need.
  • Have some fun guessing color names in a simple game: some of them might not be as intuitive as you think.

Từ khóa » Html Color Text Background