How to set color in html-Front-end Q&A-php.cn

How to set color in html

PHPz

Release： 2023-04-21 16:54:33

Original

11360 people have browsed it

HTML is a markup language used to create and design web pages. When creating web pages, using color can help them be more attractive and readable. HTML provides many ways to set colors. In this article, we will learn how to set colors using HTML.

1. Basic concepts of HTML color

HTML color usually uses the RGB color mode (composed of the brightness values of red, green and blue). Basic colors are represented by words, such as "Black" for black, "White" for white, "Blue" for blue, etc. In HTML, you can use the following methods to set colors:

2. Use color names

In HTML, you can directly use color names to set colors. Color names include basic color names and some common color names. Common color names are as follows:

Sample code:

<body style="background-color: DodgerBlue;">
    <h1 style="color:White;">Hello World!</h1>
    <p style="color:SlateGray;">This is a paragraph.</p>
</body>

Copy after login

3. Use hexadecimal values to set colors

In addition to using color names, you can also use RGB values to set color. RGB color consists of values from three color channels: red, green, and blue, and the value of each channel is represented by a number from 0 to 255. In HTML, you can also define a color using hexadecimal (Hex) format. The hexadecimal value starts with the # symbol, followed by 6 hexadecimal digits, where the first two digits represent the value of the red channel, the middle two digits represent the value of the green channel, and the last two digits represent the blue channel value. Here are some common hexadecimal values for colors:

Sample code:

<body style="background-color: #1E90FF;">
    <h1 style="color:#FFF;">Hello World!</h1>
    <p style="color:#708090;">This is a paragraph.</p>
</body>

Copy after login

There are some advantages to using hexadecimal values to set colors. First, it offers more color options. Secondly, using hexadecimal values ensures color consistency when multiple elements use the same color.

4. Use RGB values to set colors

The RGB value is a set of three numbers, indicating the brightness value of each color channel, which can be selected between 0~255. In HTML, you can use the following code to set RGB colors:

Sample code:

<body style="background-color: RGB(30,144,255);">
    <h1 style="color:RGB(255,255,255);">Hello World!</h1>
    <p style="color:RGB(112,128,144);">This is a paragraph.</p>
</body>

Copy after login

5. Use HSL values to set colors

HSL values represent the hue and saturation of the color Degree and lightness. In the HSL value, H represents hue, S represents saturation, and L represents lightness. In HTML, you can use the following code to set HSL colors:

Sample code:

<body style="background-color: hsl(210, 100%, 50%);">
    <h1 style="color:hsl(0, 0%, 100%);">Hello World!</h1>
    <p style="color:hsl(210, 11%, 49%);">This is a paragraph.</p>
</body>

Copy after login

6. Use CSS style sheets to set colors

In HTML, you can also Use CSS style sheets to set colors. CSS stylesheets are a technology that separates style information from HTML documents, allowing us to edit HTML pages in a clearer and logical way. Here is some sample code:

<head>
<style>
body {
    background-color: #1E90FF;
}

h1 {
    color: #FFF;
}

p {
    color: #708090;
}
</style>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
</body>

Copy after login

Summary:

There are many ways to set colors in HTML. Use color names to easily set basic and commonly used colors, use hexadecimal values and RGB values to provide more color choices, and use HSL values to allow us to set colors more precisely. Using CSS style sheets allows us to set colors more conveniently and logically. Different methods are suitable for different situations, and it is important to choose the method that suits you.

The above is the detailed content of How to set color in html. For more information, please follow other related articles on the PHP Chinese website!