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?

Vesture

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.

Scrivner

Thanks Ivan! I did some research, tint was as simple as mixing white with an existing color. I have added the explanation as a separate answer as it might help someone later. – Vesture

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;

Vesture

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);

Englis

Thanks for the input! Changing the entire project from RGB to HSL would have been painful. But thanks for the help anyway, I know something like HSL would actually be more relevant in such situation. – Vesture

Answer 4

You can use CSS variables to do this - see this example. Define R, G, B and tint as four different CSS variables.

body {
    --content-R: 100%;
    --content-G: 0%;
    --content-B: 0%;
    --text-tint: 0.5;
}

You can then use this as:

.content {
   color: rgb(
        calc(var(--content-R) * var(--text-tint) + 100% - 100% * var(--text-tint)),
        calc(var(--content-G) * var(--text-tint) + 100% - 100% * var(--text-tint)),
        calc(var(--content-B) * var(--text-tint) + 100% - 100% * var(--text-tint))
    );
}

Note:

• It only works if the colors are defined using percentages 0% to 100% (instead of integers 0 to 255). This is because the rgb function will accept floating point numbers for percentages. Trying to use integer 255 would have a calculated value of say 255 * 0.5 which is 127.5 which is not a valid integer color value (so the rgb color won't work). You also need to be careful with the limitations of the calc function.

• You can independently vary the colours and tints on child elements using the cascading styles (it didn't work when I put the rgb calc into its own body CSS variable).

• I only tried this on Chrome 65 - other browsers may act differently!

• It might have negative performance implications on the CSS style engine within the browser?

Eastwards

Answer 5

.Less has a very easy implementation for this.

After you add the .less files you can darken and lighten at will

.element{
  color:darken(#444,20%);
  // or
  // color: lighten(#444,50%);
}

taken from less.org

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

Salicylate

LESS has a tint function – Banks