CSS equivalent for Text Tint

ε祈祈猫儿з 提交于 2019-12-03 17:20:42

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.

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;

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

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

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?

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!