Way to get a color while transitioning

Question

I thought about the whole transition thing, and also saw while a text's color is being transitioned - it crosses through other tints of colors.
I had a lot of situations when I saw a beautiful color which I wanted, but it was a part of the transition process, and I eventually couldn't accomplish it.
For example, this code:

HTML:

<div id="transition">
ultra super califragilisticexpialidocious
</div>

CSS:

#transition {
color:black;
transition: 1s color;
}
#transition:hover {
color:#f00;
}

A demo: JsBin
You could see the transition shows a maroon color while text is transitioned, and my meaning is, how can I get this special tint of maroon?
Generally, my question is, how can I get a color while it is transitioned? There's a way to pick it?

Thanks in advance

Answer 1

Well, the things we think we like most are often those that are hard to get ;-)

But it's not so hard in this case. The question is whether picking the transitioning color is the best way to get what you want. Wouldn't it be simpler to change the color by hand until it looks best?

This is how to easily change a displayed font color with the Firebug plugin of Firefox:

• Open the page with the transition and open the Firebug window.
• Select the HTML tab, and then the Style tab of the side panel (if the side panel is closed, open it by clicking on the small arrow in the top right corner).
• Click on the button with the mouse pointer in the top left corner of the Firebug window, then click on the div with the transition, thus selecting it.
• You may want to disable the transition in the style, by clicking to the left of it.
• You may want to display colors in RGB instead of hex (you can toggle back and forth when you want), by clicking on the dropdown button in the Style tab and selecting the mode you want.
• You can click on the color value to edit it. Instead of rewriting it, you can click again on a single component (works in hex mode too), and then use the up and down arrow keys. It's almost like having a slider for each component. If you have the whole value selected, the arrow keys change all three components simultaneously.

Chrome is almost identical in operation. You open the Developer Tools with Ctrl-Shift-I, select an element with the magnifier button, and edit its style. You can toggle between hex colors and RGB colors by clicking on the gear-wheel within the Styles window. The difference with Firebug is that you can only modify the single RGB values with the up and down arrow keys when in RGB mode, in hex mode the arrow keys can only change the hex value as whole (i.e., starting from the B channel).

Knowing the numerical values of the endpoint colors of the transition, you can guess the numerical values of the "transition color" you want. The numerical value of each RGB (red, green, blue) component will be an intermediate value between its endpoints, more or less close to one of the two endpoint values.

The browser is free to interpolate by using the algorithm it prefers. The easiest algorithm moves colors along a straight line in the three-dimensional RGB space. Interpolated colors in this case (called linear interpolation in RGB space) are integer approximations of

R = R[0] * (1 - t) + R[1] * t
G = G[0] * (1 - t) + G[1] * t
B = B[0] * (1 - t) + B[1] * t

for t varying from 0 to 1. For t = 0.5 you get the color which is linearly (in RGB) halfway between the two endpoints. The parameter t may be any function of time (in the simplest case it is a linear function, which means that the color moves at constant speed in RGB space between the two endpoints).

As I said, the browser is free to interpolate in a more complicated way, in order to achieve a better visual result. If you really need to see what the browser does, you can slow it down to snail speed (e.g., by editing the transition-duration with Firebug), then grab the screen (e.g., by pressing the "Print Scrn" key), open your favorite image editor, paste the printed screen (often by pressing Ctrl-V), and finally select a fully colored pixel to get the RGB values of your long craved color.

BTW, your test case is particularly easy, because the endpoints are (0,0,0) and (255,0,0), so that the maroon color you are after is almost certainly nothing but a dark red of the kind (x,0,0). You only have one parameter to vary, you can even do it by trial and error with an editor!