6

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?

5 Answers 5

5

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.

1
  • 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.
    – divyanshm
    May 10, 2013 at 12:50
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;
1

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

1
  • 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.
    – divyanshm
    May 14, 2013 at 7:23
1

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?

0

.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%);
1
  • LESS has a tint function
    – Shanimal
    Feb 22 at 23:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.