CSS equivalent for Text Tint

Question

I'm trying to export files from Adobe InDesign to basic HTML + CSS.

A user can select some text and change the text colour. Using the InDesign SDK I can fetch the RGB values for that colour and in the CSS file declare color: rgb(R,G,B) which works perfectly fine.

You can also change the text tint value. Upto now I was just taking the tint value, converting it to the range 0-1 and in the CSS putting an entry as color: rgba(R,G,B,Tint)

During testing I realized that tint = 0 should actually mean white text, but it didn't show on the HTML because A (in RGBA) = 0 means transparent!!!

Anyone knows how to handle tint values in CSS?

Answer 1

There is no tint, hue,saturation or brightness in CSS. You should "build" these properties into your RGB color. To apply tint on your RGB, use this expression:

when R,G,B are from 0..255, tint from 0..1

new R = tint*R + (1-tint)*255;
new G = tint*G + (1-tint)*255;
new B = tint*B + (1-tint)*255;

Tint is the convex combination of your color and white color. See Wikipedia.

Answer 2

Ivan Kuckir's solution is correct, I'm just adding an explanation as it might help someone later.

Explanation - Tint means adding white to a colour. Tint %X implies = there is a mixture of white and your color where white is (100-X)% of the mixture and your color constitutes X% in the mixture.
Thus, say for color Red (255,0,0) and tint .6 => Create a mixture with 60% RED and 40% WHITE.

Hence, the resulting mixture should be something like -
.6 * RED + .4 * WHITE
This can be followed for mixing any 2 colors (C1, C2) in a certain proportion = p:q

new R = p/(p+q) * R1 + q/(p+q) * R2
new G = p/(p+q) * G1 + q/(p+q) * G2
new B = p/(p+q) * B1 + q/(p+q) * B2

For tint, (R2,G2,B2) = (255,255,255)

new R = tint*R + (1-tint)*255;
new G = tint*G + (1-tint)*255;
new B = tint*B + (1-tint)*255;

Answer 3

Unfortunately there's no way of doing text tint using plain CSS.

Colors in CSS can be specified by the following methods:

• Hexadecimal colors - #RRGGBB
• RGB colors - rgb(red, green, blue)
• RGBA colors - rgb(red, green, blue, alpha)
• HSL colors - hsl(hue, saturation, lightness)
• HSLA colors - hsl(hue, saturation, lightness, alpha)
• Predefined/Cross-browser color names - 'red','aqua', etc

Source

So you would need a JS script for that. (See Ivan Kuckir's answer);