Color word different colors

Please Note:
This article is written for users of the following Microsoft Word versions: 2007, 2010, 2013, 2016, 2019, and Word in Microsoft 365. If you are using an earlier version (Word 2003 or earlier), this tip may not work for you. For a version of this tip written specifically for earlier versions of Word, click here: Using Different Colors with Tracked Changes.

Deborah uses Track Changes to note edits made in a document. She made corrections in a document with Track Changes turned on, so her changes were in one color. Her boss reviewed the document and gave it back to her, asking that the next round of changes be in a different color than the first round was. Deborah wonders if there is a way to specify that her next set of changes be in a different color.

Word’s Track Changes feature chooses markup colors based on the user name. To make future changes you need to alter the user name slightly. Here are the steps if you are using Word 2007 or Word 2010:

1. Display the Review tab on the ribbon.
2. Click the down-arrow under the Track Changes option in the Tracking group.
3. Choose Change User Name. Word displays the Popular options of the Word Options dialog box if you are using Word 2007. If you are using Word 2010 then it displays the General options of the Word Options dialog box. (See Figure 1.)



Figure 1. The General options of the Word Options dialog box.

4. Change the User Name field value by adding or deleting a middle initial or name or by adding a number to the end of the name.
5. Change the Initials field to correspond more closely to the change you made in the User Name field.
6. Click OK.

If you are using Word 2013 or a later version, then the steps are a bit different:

1. Display the Review tab on the ribbon.
2. Click the small arrow at the bottom-right of the Tracking group. Word displays the Track Changes Options dialog box. (See Figure 2.)



Figure 2. The Track Changes Options dialog box.

3. Click the Change User Name button. Word displays the General options of the Word Options dialog box.
4. Change the User Name field value by adding or deleting a middle initial or name or by adding a number to the end of the name.
5. Change the Initials field to correspond more closely to the change you made in the User Name field.
6. Make sure the Always Use These Values Regardless of Sign in to Office checkbox is selected. (This step is very important.) (See Figure 3.)



Figure 3. The General options of the Word Options dialog box.

7. Click OK.

Edits with Track Changes will now be in a new color. When the mouse hovers over a change, the new user name will be displayed. If you change the user name back to the original value, future edits will revert to color that was first assigned to that name.

When you are done, be sure to change your user name back to the original value so that other documents will be labeled with that name instead of a convoluted name for editing purposes.

Author Bio

With more than 50 non-fiction books and numerous magazine articles to his credit, Allen Wyatt is an internationally recognized author. He is president of Sharon Parq Associates, a computer and publishing services company. Learn more about Allen…

Multicolor texts can make your website more attractive and interesting for visitors. This snippet will help you to learn how to create such texts for your website.

There are 3 ways of creating a multicolor text. Let’s dive in and try it together.

You can create a multicolor text with the help of image editors such as Pixelmator, Photoshop and so on. So, you can create a multicolor image and embed it into your website.

The multicolor text will not be searchable with this method.

As a result, your code will look like the following:

<img src="multicolortext.png" alt="multi color text"/>

Another way is creating a text with separate elements by using the HTML <span> tag, which is an empty container. This means that you create a multicolor text by putting each letter in a separate element to define a different color for each letter of your text.

Example of creating a multicolor text with separate elements in HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <span style="color:#FF0000">H</span>
    <span style="color:#66CC66">e</span>
    <span style="color:#FF9966">l</span>
    <span style="color:#FFCCCC">l</span>
    <span style="color:#FF0066">o</span>
  </body>
</html>

Result

And finally, you can use CSS. This is the easiest way of creating such kind of text.

Put your text in a <span> tag and give it a class name «multicolortext». Then, you need the CSS background-image property to add a gradient background to your text with its «linear-gradient» value, where you put the names of your preferred colors.

To get multicolor text instead of the multicolor background, you need to use the background-clip property, which lets you control how far a background image or color extends beyond the element’s padding or content. This step gives some colors to your text, but not exactly what you want.

You can get the final result by making your text color transparent with the color property so that the background color will be reflected in the text.

Example of creating a multicolor text with HTML and CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicolortext {
        background-image: linear-gradient(to left, violet, indigo, green, blue, yellow, orange, red);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;
      }
    </style>
  </head>
  <body>
    <h1>
      <span class="multicolortext">Let’s be creative!</span>
    </h1>
  </body>
</html>

Let’s get modern!

I think you’re like me in that previous examples are not something we want to do in this day and age (Although they were good enough to grasp ways to do it).

So let’s do it in a more modern way. Here comes the magic of linear-gradient! Now we start our example, going step by step, and extend this!

We have just one h1 tag and will make it alive soon with an animation!

Also, you can read the comments in front of each closing line of CSS styles to help you understand even better.

We start implementing our text with some basic styling.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Linear Gradient</title>
  </head>
  <body>
    <style>
      h1 {
        font-size: 10vw; /* make our h1 tag larger */
        font-family: sans-serif; /* choosing our font */
      }
    </style>
    <h1>W3DOCS</h1>
  </body>
</html>

Here we’ll add background and our linear-gradient value.

h1 {
  font-size: 10vw;
  /* make our h1 tag larger */
  font-family: sans-serif;
  /* choosing our font */
  background: linear-gradient(to right, rgba(255, 215, 255, 0) 0%, rgba(225, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 61%), linear-gradient(rgb(97, 183, 217) 52%, rgb(224, 246, 255) 60%, rgb(78, 99, 132) 61%);
  /* you can change the colors based on your preference */
}

Let’s see what we’ve got now:

Now, let’s add background-clip and -webkit-text-fill-color properties to have the linear-gradient take effect on our text.

h1 {
  font-size: 10vw;
  /* make our h1 tag larger */
  font-family: sans-serif;
  /* choosing our font */
  background: linear-gradient(to right, rgba(255, 215, 255, 0) 0%, rgba(225, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 61%), linear-gradient(rgb(97, 183, 217) 52%, rgb(224, 246, 255) 60%, rgb(78, 99, 132) 61%);
  /* you can change the colors based on your preference */
  background-clip: text;
  /*add this line, it defines how far the background should extend within an element, here we set it to text */
  -webkit-background-clip: text;
  /* add this line, for browsers compatibility */
  -webkit-text-fill-color: transparent;
  /* specifies the fill color of text characters. We use transparent to use the background value as our text fill */
}

Now it looks like this:

Much better. Let’s take it a step further and give it some wavy animation to make it even cooler!

h1 {
  font-size: 10vw;
  /* make our h1 tag larger */
  font-family: sans-serif;
  /* choosing our font */
  background: linear-gradient(to right, rgba(255, 215, 255, 0) 0%, rgba(225, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 61%), linear-gradient(rgb(97, 183, 217) 52%, rgb(224, 246, 255) 60%, rgb(78, 99, 132) 61%);
  /* you can change the colors based on your preference */
  background-clip: text;
  /*it defines how far the background should extend within an element, here we set it to text */
  -webkit-background-clip: text;
  /*for browsers compatibility */
  -webkit-text-fill-color: transparent;
  /* specifies the fill color of text characters. We use transparent to use the background as our text fill */
  animation: wave 2000ms ease alternate infinite;
  /* add this line */
  transition: all 0.4s ease;
  /* add this line */
}
@keyframes wave {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50vw 10px;
  }
}
/* add this line */

We defined a custom animation named wave here, which will be run every 2 seconds, and during this time, it will change our background-position 50vw on the x-axis and 10px on the y-axis. You’re free to change that values and get your desired result as well!

We also declared a transition to smooth this movement a little bit!

Here’s the final code and result:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Linear Gradient</title>
  </head>
  <body>
    <style>
      h1 {
        font-size: 10vw; /* make our h1 tag larger */
        font-family: sans-serif; /* choosing our font */
        background: linear-gradient(to right, rgba(255, 215, 255, 0) 0%, rgba(225, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 61%), linear-gradient(rgb(97, 183, 217) 52%, rgb(224, 246, 255) 60%, rgb(78, 99, 132) 61%); /* you can change the colors based on your preference */
        background-clip: text; /*it defines how far the background should extend within an element, here we set it to text */
        -webkit-background-clip: text; /*for browsers compatibility */
        -webkit-text-fill-color: transparent; /* specifies the fill color of text characters. We use transparent to use the background as our text fill  */
        animation: wave 2000ms ease alternate infinite;
        transition: all 0.4s ease;
      }
      @keyframes wave {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: 50vw 10px;
        }
      }
    </style>
    <h1>W3DOCS</h1>
  </body>
</html>

Cool! I hope you’ve enjoyed it!

Given the requirements:

1) A User inserts some text in a RichTextBox Control.
2) If the word entered is part of a pre-defined list of words, that word should change color (so, define a relation between a word and a color).
3) When a mouse Click event is generated on a colored word, an event is raised, to notify which word was clicked.

Possible result (to replicate what’s in the visual example):

Define a custom EventHandler with custom EventArgs:

public class WordsEventArgs : EventArgs
{
    private string m_word;
    public WordsEventArgs(string word) { m_word = word; }
    public string Word { get { return m_word; } set { m_word = value; } }
}

public delegate void WordsEventHandler(object sender, WordsEventArgs e);
public event WordsEventHandler WordClicked;

protected void OnWordClicked(WordsEventArgs e) => WordClicked?.Invoke(this, e);

Subscribe to the event:

this.WordClicked += new WordsEventHandler(this.Word_Click);

Simple Class for the list of words:

public class ColoredWord
{
    public string Word { get; set; }
    public Color WordColor { get; set; }
}

public List<ColoredWord> ColoredWords = new List<ColoredWord>();

Fill the list with some words an related color, then bind it to a ListBox, calling the FillColoredWords() method (in other words, handle a collection of objects that relate pieces of text with Color values):

public void FillColoredWords()
{
    ColoredWords.Add(new ColoredWord { Word = "SIMPLE", WordColor = Color.Goldenrod });
    ColoredWords.Add(new ColoredWord { Word = "COLORED", WordColor = Color.Salmon });
    ColoredWords.Add(new ColoredWord { Word = "TEXT", WordColor = Color.DarkCyan });
    this.listBox1.DisplayMember = "Word";
    this.listBox1.DataSource = ColoredWords;
}

In the KeyPress event, evaluate whether the last entered word is part of the list of words to color:

private void richTextBox1_KeyPress(object sender, KeyPressEventArgs e)
{
    int currentPosition = richTextBox1.SelectionStart;

    if (e.KeyChar == (char)Keys.Space && currentPosition > 0 && richTextBox1.Text.Length > 1) {
        int lastSpacePos = richTextBox1.Text.LastIndexOf((char)Keys.Space, currentPosition - 1);
        lastSpacePos = lastSpacePos > -1 ? lastSpacePos + 1 : 0;

        string lastWord = richTextBox1.Text.Substring(lastSpacePos, currentPosition - (lastSpacePos));
        ColoredWord result = ColoredWords.FirstOrDefault(s => s.Word == lastWord.ToUpper());

        richTextBox1.Select(lastSpacePos, currentPosition - lastSpacePos);
        if (result != null) {
            if (richTextBox1.SelectionColor != result.WordColor) { 
                richTextBox1.SelectionColor = result.WordColor;
            }
        }
        else {
            if (richTextBox1.SelectionColor != richTextBox1.ForeColor) { 
                richTextBox1.SelectionColor = richTextBox1.ForeColor;
            }
        }
        richTextBox1.SelectionStart = currentPosition;
        richTextBox1.SelectionLength = 0;
        richTextBox1.SelectionColor = richTextBox1.ForeColor;
    }
}

In the MouseClick event, verify whether the event is generated on a colored word.
In that case, raise the custom OnWordClicked() event:

private void richTextBox1_MouseClick(object sender, MouseEventArgs e)
{
    if (richTextBox1.SelectionColor.ToArgb() != richTextBox1.ForeColor.ToArgb()) {
        try {
            int wordInit = richTextBox1.Text.LastIndexOf((char)32, richTextBox1.SelectionStart);
            wordInit = wordInit > -1 ? wordInit : 0;
            int wordEnd = richTextBox1.Text.IndexOf((char)32, richTextBox1.SelectionStart);
            string wordClicked = richTextBox1.Text.Substring(wordInit, wordEnd - wordInit) + Environment.NewLine;
            OnWordClicked(new WordsEventArgs(wordClicked));
        }
        catch (Exception) {
            //Handle a fast DoubleClick: RTB is a bit dumb.
            //Handle a word auto-selection that changes the `.SelectionStart` value
        }
    }
}

In the custom event, you can append the clicked word to a TextBox (or do whatever else you want to do with it):

private void Word_Click(object sender, WordsEventArgs e)
{
    textBox1.AppendText(e.Word);
}

If your chosen communication method is through written documents, changing text color is probably the easiest way to have a word or section stand out. I’ll show you how to change text color in Microsoft Word.

Change text color in Microsoft Word

As with most formatting features in MS Word, you can either change a setting prior to typing your text or you can type it and change the color, size, font, etc. later.

Let’s say you’ve already typed your document and you want to change the color of a single word from the default black to red. Click your mouse just before the first letter of the word or words that you wish the alter the color, then drag your mouse or your finger on a trackpad across until your target text is selected. Once you’ve selected the text, use one of the following methods to change the color.

You can use any of these methods to change your font color for an entire document. If you haven’t typed anything into your document yet, you’d simply use one of the methods given below to change the text color at the beginning of the document.

If your document is fully typed and you decide to change the text color, say from black to dark grey, just select the entire text before you use the methods given below.

Hint: Click anywhere in the document with your mouse. Then, Control + A on Windows computers or Command + A on Mac computers will select the text of the entire document.

Method one – change text color in Word

Leave your text selected and select the Home tab in the ribbon.

• The second section from the left is the text section. Look for a capital A icon with a colored underline. Click that A icon to change your text to the color of the underline under that icon.
• If you want a different color, click the small arrow just on the right of that A icon. An options panel will open where you can select from a number of colors.
• If you don’t see the color you’re looking for, click More Colors… to open a color wheel that will allow you to choose from many more colors.

Method two – change text color in Word

Leave your text selected.

• Right-click on the text and choose “Font….”
• Be sure the Font tab is selected, then in the second section down (Font and Underline), click in the drop-down box below Font Color….

In Microsoft Word for Mac, you could possibly have a huge assortment of font colors available to you. The exact number depends on whether you have other software such as graphic design or photo editing software on your computer that might install additional colors.

When you open the Font panel from the right-click menu, then open the Font color drop-down box, you will see an assortment of color pickers – wheels, etc.. Any of those may present your with more colors to select from.

In the panel that you see when you click the font color drop-down box, there is another drop-down at the top that lets you choose the type of sliders that you want to use. You can RGB, CMYK and more.

To the right of that option, there is a tiny gear icon. If you click on that gear icon, you will see a long list of color profiles to select from. In most cases, writers will not need to change those, but they are available if needed.

Set your font color before typing text in Microsoft Word

You can also set the font color prior to typing the words in MS Word. To do that, just follow the previous instructions except that you will not select your text before you choose the color. Instead, when you come to the place in your document where you want the different colored word, stop just prior to the different colored word. Use the instructions above to set the font color. The menu/ribbon and right-click options will work.

When you’re ready to return to black or whatever your basic document text color is, follow the instructions again and choose black. Continue typing. You should see your colored word in line with your black text.

Personally, if I know ahead of time that I want one or more upcoming words to be a different color, I find it easier to just do it as I type than to return and change it later.

You’ll find more of our tips for styling your text in Microsoft Word here.

You can learn more about styling text in the Microsoft Style Guide.