Briefly
The color property sets the text color.
Example
Inherits the value of the color property from the nearest parent that has it specified:
.element { color: currentColor;}.element { color: currentColor; }
Sets the value by color name:
.element { color: red; color: orange; color: tan; color: rebeccapurple;}.element { color: red; color: orange; color: tan; color: rebeccapurple; }
HEX color code, 3 or 6 characters for solid colors and 4 or 8 characters for transparent colors:
.element { color: #090; color: #009900; color: #090a; color: #009900aa;}.element { color: #090; color: #009900; color: #090a; color: #009900aa; }
RGB value in the old rgb syntax for solid colors and rgba for transparent ones:
.element { color: rgb(34, 12, 64); color: rgba(34, 12, 64, 0.6);}.element { color: rgb(34, 12, 64); color: rgba(34, 12, 64, 0.6); }
RGB value in the new rgb syntax for solid and transparent colors:
.element { color: rgb(34 12 64); color: rgb(34 12 64 / 0.6); color: rgb(34 12 64 / 60%);}.element { color: rgb(34 12 64); color: rgb(34 12 64 / 0.6); color: rgb(34 12 64 / 60%); }
HSL value in the old hsl syntax for solid colors and hsla for transparent ones:
.element { color: hsl(30, 100%, 50%); color: hsla(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 60%);}.element { color: hsl(30, 100%, 50%); color: hsla(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 60%); }
HSL value in the new hsl syntax for solid and transparent colors:
.element { color: hsl(30 100% 50%); color: hsl(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%);}.element { color: hsl(30 100% 50%); color: hsl(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%); }
How to understand
Any element on a web page can have its text color set. The color property specifies it for text, and also for its decorative elements, such as underline, line above the text, strikethrough, and others.
To set the background color, use the background property, and the borders of an element can be colored using border.
How it is written
The color can be defined using the name of the color, in HEX format, RGB, HSL, or by using keywords. Detailed information about the possible values can be found in the article "Colors on the web".
Color Name
You can use the name of the color or its shade in English from the list of named colors. This is a basic set of opaque colors, such as red red, blue blue, orange orange, black black, dark gray darkgray, light gray lightgrey, white white, as well as mixed colors, like light sea green lightseagreen, cornflower blue cornflowerblue, or tomato tomato.
HEX Code
A hexadecimal color code in the RGB color model, starting with #, for example, #ff0000. Solid colors are written in the format # or in shortened form # (if the characters of each group are the same). For example, #009900 or #090. If you need to specify transparency, it is added at the end in HEX format # or #, for example, #00990055 or #0905.
Previously, it was not possible to specify a color in the # notation and you had to use the function rgba, but today this method has notable cross-browser compatibility. The problem is that few people can accurately calculate 50% in hexadecimal format on the fly, so when specifying color transparency, functions like rgb are more often used, where transparency can be specified in fractions or percentages.
RGB Format
To specify a color, the rgb function is used, for example, rgb for blue. Each of the three values corresponds to a separate RGB channel and can be written as a number from 0 to 255 or in percentages. To add transparency, after writing the channels, a slash and the desired value from 0 to 1 or in percentages is added, for example, rgb for semi-transparent blue.
Previously, the RGB syntax differed from the modern one, and you may still encounter it in code or choose it for better cross-browser compatibility, see Can I use. To separate channels within the function, commas rgb had to be used, and for adding transparency — a special function rgba, which took the last parameter as the transparency of the color, for example, rgba.
HSL Format
The HSL color model describes the same colors as HSL, but differently: H — Hue (hue), S — Saturation (saturation), L — Lightness (lightness). For example, hsl for green. The first hue value is specified in degrees and can be written simply as 120 (as is most often done) or with the unit specified as 120deg, the second and third values are specified in percentages. Transparency is added in the same way as in rgb, with a slash followed by the value, for example, hsl for semi-transparent green.
The syntax for hsl differed from the modern one just like rgb: commas were needed, and a special function hsla was used to assign transparency to the color. Use the old syntax for better compatibility and don't be surprised if you encounter it in code.
Keywords
The keyword transparent defines a transparent text color. Technically, this is equivalent to writing any color with zero transparency rgb, but there can be cases where just transparency and transparent color can behave differently, such as in gradients.
Useful Links
It is generally better to trust color selection to professionals, but sometimes we work on projects for ourselves, and we need to make a good selection of colors for the project. In this case, it is best not to reinvent the wheel, but to use existing open-source selections:
Or create something of your own, but under the guidance of professionals. For example:
And pay special attention to services that can select safe colors for people with specific perception issues:
Tips
💡 Nothing beats black text on a white background. Or white on black if reading at night. Make sure the text color looks contrasting against the specified background, it's even better to check.
💡 The color property can be animated using transition 🎉
💡 If you need to set semi-transparent text, use a value with an alpha channel specified. Do not use opacity for this purpose. Otherwise, when adding other content to the element, such as an icon, it will also become semi-transparent. This was likely not in your plans.
In practice
Advice 1
🛠 Text color is an inherited property. If a certain color predominates on the page, it can be set for the html selector. This color will automatically color all text on the page.
🛠 The current keyword is needed to use the current or inherited text color in other places where color for background, borders, and others can be specified, for example:
<div class="parent"> We made this text green using the "color" property. The borders of the block inherit the color from the text. <div class="child"></div> The block above 👆 also inherits the background color from the text for which the "color" property is set.</div><div class="parent"> We made this text green using the "color" property. The borders of the block inherit the color from the text. <div class="child"></div> The block above 👆 also inherits the background color from the text for which the "color" property is set. </div>
.parent { color: #49a16c; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;}.child { background: currentColor; height: 110px;}.parent { color: #49a16c; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; } .child { background: currentColor; height: 110px; }