Yesterday, to colour-code for a colourful listening-thoughts for KOKIA's new album, I indeed spent a lot of time, to find the proper colour code, to create the gradient, and to add span tags for each text segment.
W3school's color mixer is a good choice to generate gradient, but it only does two colours at the same time, and the start points are limited to basic colours. While there are also lots of online tools to create such a gradient and apply it onto your text, but 1) it may not be able to render utf8, but I need Japanese; 2) it splits the entire text into single letters, each letter has its own <span> tag. For small things like a forum signature there's no problem, but for longer stuff, it's a pain to further edit the text; 3) there may be a really perfect one, but I didn't want to spend much time to google for it.
W3school's color mixer is a good choice to generate gradient, but it only does two colours at the same time, and the start points are limited to basic colours. While there are also lots of online tools to create such a gradient and apply it onto your text, but 1) it may not be able to render utf8, but I need Japanese; 2) it splits the entire text into single letters, each letter has its own <span> tag. For small things like a forum signature there's no problem, but for longer stuff, it's a pain to further edit the text; 3) there may be a really perfect one, but I didn't want to spend much time to google for it.
So the best way is to make one myself, so I know what's going on, and will have the full control.
Features:
- output both HEX and RGB colour codes, so I don't have to either photoshop or google for a converter when doing "rgba" in CSS.
- create gradients between more than two colours, go making a rainbow!
- customisable mixing-levels, depending on whether I want a fine or coarse change.
- write to html for visual preview, with pre-written <span> tags that're ready to use, reduce my time spending with npp and regex find-and-replace.
- output both HEX and RGB colour codes, so I don't have to either photoshop or google for a converter when doing "rgba" in CSS.
- create gradients between more than two colours, go making a rainbow!
- customisable mixing-levels, depending on whether I want a fine or coarse change.
- write to html for visual preview, with pre-written <span> tags that're ready to use, reduce my time spending with npp and regex find-and-replace.
However, it doesn't apply the gradient effect to given text. As for lots of times, I prefer doing the colouring manually -- these three words should be in the same colour, while next two words have different colours each. If I really want to apply all the colour changes in an automatic fashion, I can then make another script to handle it.
Also, I'm not bothering to make it to another color mixer. Before, I always wanted tools that are visually easy to use, but now, I more like to do things in batch, via the simple yet mighty command line.
and another reason is I can't survive in javascript, which is required in this case I believe...
Before, I used to wonder how colour mixer worked. How the script mixes two colours? Later on, I learned the relationship between the hex colour code and the rgb code -- I never knew it's such a straight forward fact: you just need to know how to convert between hex and dec. I was shocked when I learned it... orz
Then the rest is nothing but doing some basic math, and then sending to the screen, or a html file.
Of course, it's still hard for me to understand how a computer can interprets these colour codes and display different colours on the screen >>> out of my field!
Then the rest is nothing but doing some basic math, and then sending to the screen, or a html file.
Of course, it's still hard for me to understand how a computer can interprets these colour codes and display different colours on the screen >>> out of my field!
Once you know it, you can do the magic too!
Isn't it so obvious? (´ω`*)
Isn't it so obvious? (´ω`*)