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.
Palettes
The official tool thus gives me the following palette:
- Primary
- 378aba
- P Light
- 6fbaed
- P Dark
- 005d8a
- Secondary
- 00c0ff
- S Light
- 6af3ff
- S Dark
- 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
- 285a84
- 800
- 3379a6
- [700]
- 378aba
- 600
- 3f9dcd
- 500
- 46aadb
- 400
- 53b7e0
- 300
- 68c3e4
- 200
- 8cd4ec
- 100
- b8e5f3
- 50
- e3f5fa
- 900
- 0051a3
- 800
- 0071c6
- 700
- 0082da
- 600
- 0095ef
- 500
- 00a3fe
- 400
- 00b2ff
- [300]
- 00bfff
- 200
- 6ed1ff
- 100
- abe3ff
- 50
- 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
- 165a94
- 800
- 236da3
- 700
- 2a77ab
- 600
- 3182b3
- 500
- 378aba
- 400
- 559cc4
- 300
- 73adcf
- 200
- 9bc5dd
- 100
- c3dcea
- 50
- e7f1f7
- A700
- 49a6ff
- A400
- 63b2ff
- A200
- 96cbff
- A100
- c9e4ff
- 900
- 009cff
- 800
- 00aaff
- 700
- 00b2ff
- 600
- 00baff
- 500
- 00c0ff
- 400
- 26c9ff
- 300
- 4dd3ff
- 200
- 80e0ff
- 100
- b3ecff
- 50
- e0f7ff
- A700
- a6d8ff
- A400
- bfe3ff
- A200
- f2f9ff
- A100
- ffffff
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.