CSS equivalent for Text Tint

问题

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?

回答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.

回答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;

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

回答4:

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

回答5:

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?

来源：https://stackoverflow.com/questions/16464485/css-equivalent-for-text-tint

标签

html

css

rgba

tint