On Tone Colors

While looking for discussions on tone colors, I came across this blog post the other day, “Color temperature of Mandarin tones“. I am by no means a designer, but I found it to be a really interesting analysis of a couple different systems used for tone colors. I highly recommend checking it out. In the meantime, I thought it might be worth taking some time to look into tone colors: what they are, how to use them, which system to follow, and if it’s worth using. At the very end I’ll go over how to configure two popular dictionary apps to use whichever tone color system you prefer.

What are tone colors?

First and foremost, tone colors are just another way to create a visual reminder of the tones for each character. By using colors assigned to the individual tones (such as red for first tone, blue for the third tone, etc), it helps give the learner a quick visual cue for the character’s tone. This can be helpful when looking at dictionary entries, for example:

Tone colors in Hanping


Tone colors in Pleco

As a result, it serves as a quick handy reference guide for tones. However, you can also see where this system has some flaws: lack of consistency for tone colors.

Why should one use tone colors?

Tone colors are particularly helpful if you’re focusing just on the characters themselves, and are trying to limit exposure to Pinyin or any other phonetic system.

A real world example: I would also block out the Pinyin and rely on the audio files to learn the pronunciation. I would, however, use my highlighters to highlight each character with a color corresponding to the tone. I found it to be a helpful quick reference, especially when reading through a textbook.

One other nice thing: it can serve as handy scaffolding to learning the tones for individual characters. Say you remember the pronunciation but forgot what the tone was for the character. Rather than having to reference back to the Pinyin, you can get a visual color cue from the character instead.

What tone color system should I follow?

There’s plenty of discussion about the various tone color systems and which one is best. I recommend the following two articles for a bit more in depth discussion about it:

While I prefer the one that the Hanping dictionary uses (Android only app however), in general, especially if you’re just getting started, I’d recommend just following the one your dictionary of choice uses. Be it MDBG, Pleco, or Hanping, just use the system they use as you’ll likely be referencing their dictionary a lot.

In both the Pleco and Hanping apps you can even manually go in and change the colors you want to use to keep things consistent across your dictionaries. I’ll get more into how to change the tone colors in those apps at the end of the post.

Is it worth it?

There is definitely an argument to be made against using tone colors, especially for new learners.

When you’re already referencing Pinyin or Zhuyin, which already have tone markers, it’s hard to justify increasing the learning complexity by adding a new system on top of it. That is, not only learning how to read Pinyin or Zhuying, you also need to remember what tone each color represents.

I still like using tone colors, and find them really handy even as I come across characters I haven’t seen in a while. It’s also, as mentioned above, it’s a nice quick visual reminder of the tone.

So really it just comes down to personal preference–so pick what you like and use it.

For the guides to change tone colors in Pleco and Hanping, click below!

How to Change Tone Colors in Pleco


  1. Open the left menu and navigate to Settings
  2. Tap “Colors”
  3. Tap “Tone Colors”
  4. Tap each tone color individually to edit them with a color palette. You can use hex codes or select it manually.


Note: there appears to be a slight bug, at least on the Android version, where the hex color code is the same color as the background–white–but you can highlight it to edit it or replace it.


How to Change Tone Colors in Hanping


  1. Open the left menu and navigate to Settings
  2. Tap “Chinese Settings”
  3. Tap “Tone Coloring”
  4. A new page with a color wheel opens. Tap the tone number at the top to change the color for each tone. Unfortunately there is no hex color code support so you’ll  have to manually move it to the colors you want.


…. If you hit the little download/import icon at the upper right, you can import tone color presets as well, which cover quite a few popular options:


Update: Mark, in his comment below, pointed out that there is actually a way to import hex values for tone colors as a string of values on your phone’s clipboard. To see how this works, click the “share” icon below and it will output the following instructions:

To import this coloring scheme, copy the following 30 character string into your clipboard:

42A5F54CAF50F57C00D32F2F 9E9E9E

Next, launch Hanping, open the Tone Coloring dialog and click the presets icon in the top-left.

So to do this, you’ll have to have your hex values you want to import, for example:

1st: #268bd2
2nd: #859900
3rd: #6c71c4
4th: #dc322f
5th: #586e75

Take those values and put them in order of tone, from first to fifth:


Just copy that string to your clipboard and you’ll be able to import it under the preset settings via the download/import button. It will show you the colors set in the 30 character string above:


If you need a quick reference for the different tone colors used. check out this post: Tone Colors and What Pleco Did with Them, it includes a chart for different tone color systems and the RGB values for each.

Have you used tone colors? Do you find them effective or is it not worth the effort? Let me know in comments below!


4 thoughts on “On Tone Colors

  1. Thanks for the mention! A quick heads-up that in Hanping you can import hex RGB values for the colors. To see how this works, click the Share icon on the Tone Coloring screen (perhaps share it to Clipboard) and read the instructions there.

    • Thank you for pointing that out to me! I’ve updated the post to reflect that, and give some explanation in how to go about it. Let me know if I missed anything.

      I do like that way of importing it, so you can just do the whole chunk of it at once.

  2. […] Learning Apps for Android post, which you can take a look at here as well as in the recent tone colors post. The developer keeps the app updated regularly, and there is a whole series of related apps, […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s