By reading this article, you can understand how to change the color of text displayed with HTML tags, so be sure to check it out!
Table of contents
- How to specify color to change HTML font color
- What is a color name
- What is color code
- Characteristics and Usage of Hexadecimal Color Codes
- Characteristics and Usage of RGB Color Codes (Decimal)
- [Unavailable in HTML5] How to change the font color with the font tag
- How to change font color with HTML style attribute
- How to change font color with HTML style tag
- 3 convenient sites when deciding on HTML font color
- PEKO STEP
- color picker
- iromiru
- What to do when the font color does not change
- Check for spelling errors
- Check if cache is left
- Check if the style written in the CSS file is not lost
- summary
How to specify color to change HTML font color
There are two ways to specify the color when changing the HTML font color: the color name specified by the color name, and the method specified by the color code.
This section explains the features and usage of each specification method.
What is a color name
As the name suggests, Color Name is a way to change the font color by entering the color name as a value .
The advantage of using color names is that you can see the specified color at a glance.
For example, to specify white, enter “white”, and to specify blue, enter the value “blue” to change the color.
The input example of the color name is as follows.
color:red;/*
color:skyblue;/*Since the number of colors that can be specified is limited, the brightness and saturation cannot be changed, but this specification method is suitable when you want to express a single color or a simple color.
What is color code
A color code is a method of creating colors with the values of red, green, and blue, which are the three primary colors of light .
More than 16 million colors can be represented by using color codes. Since it can express from simple colors to complex colors, it is often used by web designers when specifying colors.
There are two types of color codes : one that specifies colors with hexadecimal numbers and one that specifies colors with RGB values . I will explain each feature and how to specify it.
Characteristics and Usage of Hexadecimal Color Codes
A hexadecimal color code is a six-digit alphanumeric way to create a color.
To specify the color, specify three colors (red, green, and blue) in order from the left of the value with two-digit alphanumeric characters.
The color value is specified as a value from 00 to ff, with the color getting darker as it approaches ff.
For example, to create a solid red with a hexadecimal color code, enter ff for the red portion and 00 for the rest.
color:#ff0000;*/一
color:#00ff00;*/一
color:#0000ff;*/一By entering as above, you can express a single color of red.
Characteristics and Usage of RGB Color Codes (Decimal)
An RGB color code is a decimal representation of how a color is specified.
The name RGB is derived from the initial letters of Red, Green, and Blue, and uses the three primary colors of light, just like hexadecimal color codes.
The input method is as follows.
Express the color intensity with a number from 0 to 255, and enter red, green, and blue in order from the left.
In the sample code below, a solid red color is expressed by specifying 255 for the first value and setting the other values to 0.
color:rgb(255, 0, 0);/
color:rgb(0, 255, 0);/
color:rgb(0, 0, 255);/[Unavailable in HTML5] How to change the font color with the font tag
The font tag is an HTML tag that allows you to change the font color and size. Enter the characters you want to change the color in the tag as shown below.
You can change the color of the text by specifying the color attribute in the font tag and entering the color code value.
Also, please note that HTML5 cannot be used as written in the headline .
Specific usage is as follows.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
body{
background-color: rgb(224, 223, 223);
}
font{
display: block;
}
</style>
</head>
<body>
<font color="red">
<font color="yellow">
<font color="green">t>
<font color="#ff000
<font color="#ffff00"
</body>
</html>Execution result (changed background color for easier viewing
In addition, it is also possible to change the font size by adding the size attribute to the font tag. You can change the thickness in 7 steps by entering numbers from 1 to 7.
<font size="1"></font><!--This specification method is suitable when you want to change the font color and font size.
How to change font color with HTML style attribute
“I want to change the color of specific characters entered in HTML”
The best way for those thinking this way is to use the style attribute to change the font color.
You can add style by specifying the style attribute in the HTML tag. Using the style attribute allows you to change the style of specific HTML only, so it’s perfect for changing the color of specific characters.
For example, you can specify the style attribute in the HTML span tag to change the font color of only part of the text.
Recommended when you want to change the font color only for a specific sentence or part of the character.
Execution result
<p style="color: red; font-weight: bold;"></p>As in the above code, you can enter multiple CSS codes by entering a half-width space between them.
How to change font color with HTML style tag
A style tag is a type of HTML tag that allows you to enter CSS in your HTML file . It is suitable when you want to use CSS only in one HTML file because you can set styles to HTML tags without preparing a CSS file.
The style tag input method is as follows.
<head>
<style> </style>
</head>Enter it in the head tag of the HTML file as shown above .
You can set the color by specifying the selector you want to change the font color in the style tag and using the color property.
Also, if you specify HTML and CSS in the HTML file, the display will not collapse due to caching, and you can expect an improvement in display speed.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
.red{
color:rgb(255, 0, 0);
font-size: 30px;
}
.green{
color:#00ff00;
font-weight: bold;
}
.yellow{
color:yellow;
background-color: black;
}
</style>
</head>
<body>
<p class="red">カラーネーム赤色</p>
<p class="green">16進数緑色</p>
<p class="yellow">RGB青色</p>
</body>
</html>As in the code above, you can specify other properties in addition to specifying the color to change the size and thickness of the text.
Execution result
It is recommended when you want to adjust not only the HTML font color but also the character size and thickness.
3 convenient sites when deciding on HTML font color
When changing the font color of HTML, many people may be wondering what color to use.
Here are three recommended sites that are suitable for finding color codes to get the font color you want.
PEKO STEP
PEKO STEP has an input field for each RGB, and by changing the numerical value, it is a tool that can output a color preview screen and a hexadecimal color code.
In addition to entering numerical values, you can adjust the color intensity by dragging and dropping the knob on the right side of the input field.
If you change the value in the input field or move the knob, the color in the “color sample” field will change, so you can fine-tune the value to find the desired color.
Also, if you enter a hexadecimal value in the input field called “color code” at the top of RGB, it will change to the RGB value and preview color according to the value.
This tool is recommended for those who want to find font colors using both hexadecimal and RGB values.
color picker
A color picker is a site that retrieves colors in a color palette.
Hover your mouse over the color palette displayed on the site and click to display the hexadecimal color code and RGB color code values that represent that color.
The acquired color is previewed on the right side of the color palette.
You can also adjust the brightness of the colors by moving the knob between the color palette and the preview display up and down.
This site is recommended when you want to select colors from a color palette or when you want to adjust the brightness of colors .
iromiru
iromiru is a site where you can get the color specified in the loaded image as a hexadecimal color code.
You can load the image by entering the URL of the image in the “Enter image URL” field on the top screen, or by dragging and dropping the image to the center of the screen.
When you mouse over the loaded image, the color of that part is displayed, and when you click it, the color code of the color is displayed on the right side of the screen.
Multiple colors can be extracted, so multiple colors can be obtained from a single image.
This is the best site when you want to get colors from an image.
What to do when the font color does not change
If you change the HTML font color but the text color does not change, we recommend that you check the following points again.
- Are there any spelling errors?
- Do you have any cache left?
- Losing the style written in the CSS file
Also, if you use the verification tool, you can quickly find the reason why the code is not reflected.
How to use the verification tool is also described in the article below, so if you don’t know, please check it out.
I will explain the check contents when the font color does not change.
Check for spelling errors
First, let’s check if there are many typos in the code where the font color is changed.
Color specifications are often not reflected due to typographical errors, such as errors caused by forgetting to add the “#” at the end of an HTML tag or at the beginning of a hexadecimal color code .
Check if cache is left
It is also possible that the cache remains and the CSS is not reflected in the browser.
Cache is a function that saves frequently used data on the browser so that it can be displayed immediately . The font color may not be reflected because the browser is displaying the data before updating the code by caching.
Here are the steps to clear your browser cache:
1. Click the icon (…)
2. Click “Settings” from
the menu column 3. Click “Privacy and security” from the menu column on the left side of the
screen 4. Click “Browsing history data” from the “Privacy and security” column on the display screen Click Delete
You can clear the cache by following the steps above.
Check if the style written in the CSS file is not lost
CSS has a display priority, and CSS entered in the style tag has a lower priority than the CSS specified in the style attribute and will be overwritten.
If you have specified a text color with the style attribute but it is not reflected, it is recommended to check whether the color is specified with the style attribute in the HTML tag.
summary
This time, I explained how to change the HTML font color (character color) and recommended color code search sites.
Let’s take a look back at the HTML tags and attributes that allow us to change the font color.
- font tag: You can change the font color in the element by specifying the color attribute. Not available in HTML5
- style attribute: An attribute that allows you to specify CSS directly in the HTML tag. Recommended when using with a span tag to change the color of only part of the text.
- style tag: A tag that allows you to enter CSS code in the HTML file. Enter in the head tag.
Also, if the font color is not reflected, it is recommended to use the verification tool to find the cause.
