This time I do not plan to change much of my color scheme. Instead, it is an attempt to fine-tune details and deepen my understandings.

The material perspective

Google’s Material Design is probably one of the UI design documents that really emphasizes the usage of color. And it has the concept of prime and secondary colors, which is similar to both Kahuna’s offerings and my intention before looking for a theme.

On the other hand, I could also argue that Material Design is really for Android apps. For my blog, its use of color is probably too aggressive. Hence I use two accent colors, not one primary color and one accent color. A primary color is supposed to be all over the place, which is probably too cartoonish if I still want to describe my blogging activity as “writing”.

Google has also produced a tool to quickly toy with color schemes. Here is what I get with my current color scheme: link.

Most of the material advises are common sense. However, one of the advises that really looks worth experimenting is that it suggests using opacity instead of grey for text colors. Mathematically, they are not equivalent as long as as there are at least two background colors for the same text tone.

Thus, I patched the text color to use opacity instead. It should now provide better contrast for widget titles, though the difference is pretty minor.

The close match of concept also means that if I every use something designed with the material color scheme in mind, I would be able to easily integrate it to my blog, in terms of color scheme compatibility.


The official tool thus gives me the following palette:

Primary P Light P Dark Secondary S Light S Dark
378aba 6fbaed 005d8a 00c0ff 6af3ff 0090cc

Another official tool is buried in this page. Type any color and get a palette of 10 colors, though the given color might not sit on the 500 slot. This is what it gives:

900 800 [700] 600 500 400 300 200 100 50
285a84 3379a6 378aba 3f9dcd 46aadb 53b7e0 68c3e4 8cd4ec b8e5f3 e3f5fa
900 800 700 600 500 400 [300] 200 100 50
0051a3 0071c6 0082da 0095ef 00a3fe 00b2ff 00bfff 6ed1ff abe3ff def4ff

It assigns my current primary and secondary colors to 700 and 300 respectively, which makes a lot of sense. However, it does not generate the traditional “A”-series colors. And it assigned a different color than I specified for my secondary color, though the difference is just one.

A third party tool is available here. It produces material-flavored color schemes by placing the provided colors at 500. According to StackExchange discussion, the lighter colors it generates is very close to official while the darker colors are off.

Anyway, here is the results:


900 800 700 600 [500] 400 300 200 100 50
165A94 236DA3 2A77AB 3182B3 378ABA 559CC4 73ADCF 9BC5DD C3DCEA E7F1F7
900 800 700 600 [500] 400 300 200 100 50
A700 A400 A200 A100

Naming the secondary A100 color to FFFFFF is probably a bad idea and a proof that this program does not entirely work. Anyway, I am lazy to do the HSV conversion myself, as there are multiple standards about what HSV is, and I want to keep consistent.

Currently, the best idea seems to use the official 10-color pack along with the third party accent colors.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.