urlscan.io logo urlscan.io
SecurityTrails logo

htmlcolorcodes.com Open in urlscan Pro
18.67.93.62  Public Scan

Back to summary
URL: https://htmlcolorcodes.com/tutorials/html-text-color/
Submission: On June 19 via manual from AU — Scanned from AU

Form analysis 0 forms found in the DOM

Text Content

HTML Color Codes
 * Picker
 * Convert
    * RGB to Hex
    * Hex to RGB

 * Chart
 * Names
    * HTML Color Names
    * Minecraft Color Codes
    * Bukkit Color Codes
    * Roblox Color Codes

 * Library
 * Tutorials
 * Resources

Font Generator
 * Picker
 * Convert
   * RGB to Hex
   * Hex to RGB
 * Chart
 * Names
   * HTML
   * Minecraft
   * Bukkit
   * Roblox
 * Library
 * Tutorials
 * Resources

Dixon & Moe Email


HTML TUTORIAL


HTML TEXT COLOR

Adding color to your HTML text is easy! In this short tutorial we'll cover how
to change the color of your HTML text using Hex color codes, HTML color names,
RGB and HSL values.


TEXT COLOR USING HEX COLOR CODES

The most common way of coloring HTML text is by using hexadecimal color codes
(Hex code for short). Simply add a style attribute to the text element you want
to color – a paragraph in the example below – and use the color property with
your Hex code.

HTML
<body>
  <p style="color:#FF0000";>Red paragraph text</p>
</body>

DEMO ON CODEPEN

Don't have a Hex code? Not to worry, use our color picker to browse millions of
colors with Hex color codes, and so much more.


TEXT COLOR USING HTML COLOR NAMES

Another way to color your website's text is by using an HTML color name. The
HTML code is similar, just replace the Hex code from the previous step with the
name of the color you want to use (red in our example). There are 140 named
colors to choose from, and we've compiled a list which you can check out here.

HTML
<body>
  <p style="color:red;">Red paragraph text</p>
</body>

DEMO ON CODEPEN


TEXT COLOR USING RGB COLOR VALUES

Using RGB values is all the rage these days, but it's just as easy as Hex codes
or color names. Insert your RGB values within the rgb() parameter following the
color property. You can use our color picker to get RGB values in addition to
Hex codes.

HTML
<body>
  <p style="color:rgb(255,0,0);">Red paragraph text</p>
</body>

DEMO ON CODEPEN

When using an RGB value in your website, you can also specify opacity. Instead
of rgb() use rgba() – the a is for alpha, the color channel that controls
opacity – and after your three color values add a fourth for opacity, on a scale
from 0 – 1 (0 for completely transparent, 1 for fully opaque).

HTML
<body>
  <p style="color:rgba(255,0,0,0.5);">Red paragraph text</p>
</body>

DEMO ON CODEPEN


TEXT COLOR USING HSL COLOR VALUES

A fourth method for adding color is by using HSL values. Similar to the RGB
syntax described above, HSL uses the hsl() prefix, and three values for hue,
saturation and lightness. Hue is represented on a scale of 0 – 360, while
saturation and lightness are each a percentage between 0% and 100%.

HTML
<body>
  <p style="color:hsl(0,100%,50%);">Red paragraph text</p>
</body>

DEMO ON CODEPEN

Just like RGB, when using HSL you can modify the color opacity right in the
color property. Use the hsla() prefix and include a fourth value between 0 and 1
for the level of opacity you need.

HTML
<body>
  <p style="color:hsla(0,100%,50%,1);">Red paragraph text</p>
</body>

DEMO ON CODEPEN

SHARE HTML TEXT COLOR WITH YOUR FRIENDS!

TWEET

POST

SHARE

PIN


 * 
 * HTML Color Codes
   1. Tutorials
   2. HTML Text Color

 * ENGLISH
   
   * ENGLISH
   
   * ESPAÑOL
   
   * FRANÇAIS
   
   * 中国



DESIGNED BY


DIXON & MOE

© 2015 – 2023 PRIVACY POLICY PRIVACY MANAGER

CONTACT

EMAIL

SOCIALIZE

GOOGLE+

FACEBOOK

CODEPEN

ABOUT

We built HTML Color Codes because we believe tools for design should be well
designed themselves. If you like the site or have a suggestion, drop us a line;
feedback is very much appreciated and always welcome!

PARTNER SITES

LOREM IPSUM

WORD COUNTER

GLYPHY

COLOPHON

MIDDLEMAN

HIGHLIGHT.JS

COLORJOE.JS

COLORHARMONY.JS



Freestar.com