You’ve made a typo with -webkit-filter in the question. Might be good to confirm that you didn’t make the same typo in your code? 😉
About Color Tones, tints, shades Tool
Color toner is a tool whose purpose is to accurately produce color tints (pure white added), color shades (pure black added), and color tones (pure gray added) in adjustable steps. Dopely’s color toner is basically a color tint generator, a color tone generator and a color shade generator; where you can enter your colors in HEX, CMYK, or RGB.If you have any other color formats, use Dopely’s color converter tool.
You are better to consider using it when you already have some base colors but wish to add complementary colors to gradients, borders, backgrounds, shadows, and other elements.
Developers using SASS or Post CSS&NPSP; may be able to communicate their color intentions to designers through this feature. Furthermore, it’s a great way to see the results of varying tints and shades of any base color you’re considering for your design.
What Is Hue?
A hue is just a color in general speaking, but technically they are not exactly the same.Color is the general term we use to describe every hue, tint, tone, or shade we see in the world. Black, white, and gray are referred to as a color.While a hue refers to the dominant color family of the specific color we can see in the color wheel. white, black, and gray are not referred to as a hue.
To have a quick look at the color wheel here, we share some basic points. There are three primary colors, red, blue, and yellow on the color wheel. By combining two of those primary colors we get one of the secondary colors, violet, green, orange. And the tertiaries are the third set of colors. Primary, secondary, and tertiaries are all HUES.
Shades colors
In color theory,shade is a mixture of colors with just pure black (no gray, no white).This process results in a rich, often more intense, and darker color; however, the hue remains the same. So the shade can range from slightly darker than the original hue all the way to nearly black with barely any of the color mixed in.
Points About Color Shades
- 1. In painting, it is important, to begin with, another color and then add black gradually until obtaining your intended color.
- 2. Many painters don’t use black at all, beginning with the Impressionists, they bend the rules and create the shade mixture with neutral dark pigments such as Payne Gray or Brunt Sienna, instead.
- 3. You can create your own chromatic blacks, avoiding the use of black from a tube altogether. Chromatic black, or black made by mixing other colors together, can generally be made by mixing together the darkest hues of complementary colors.
- 4. To determine the color bias of your chromatic black, tint it with a bit of white. This helps you to find out the color your black leaning toward.
- 5. In painting, because of the overpowering nature of the black pigments, many of them change the character of a hue even in small amounts, so they should be used sparingly.
Convert an image to black and white with a color tint
Use the Color Monochrome adjustment to convert an image to a basic black and white while adding a color tint.
- You can convert a single layer to black and white or, using a color adjustments layer, multiple layers in a composition. To convert a currently selected layer to black and white wiith a color tint, do one of the following:
- Choose Format > Color Adjustments > Color Monochrome (from the Format menu at the top of your screen).
- In the Tools sidebar, click and turn on the Color Monochrome adjustment.
- Press A on your keyboard and turn on the Color Monochrome adjustment.
To edit multiple layers using a color adjustments layer (all layers below this layer will be affected):
- Choose Insert > Color Adjustments (from the Insert menu at the top of your screen) and turn on the Color Monochrome adjustment in the Tool Options pane.
- Click at the top of the Layers sidebar, choose Color Adjustments, and turn on the Color Monochrome adjustment.
- Press Shift ⇧ + Command ⌘ + A on your keyboard, and turn on the Color Monochrome adjustment.
Note: If the adjustment isn’t visible, you can turn it on from the Customize menu at the bottom of the Color Adjustments pane.
2. To select the tint color, click the color well, or pick a color directly from the image using the color picker.
Show Original: Click the Show Original button or press Control ⌃ + M on your keyboard to see what the image looks like without any color adjustments.
Show Split Comparison: Option ⌥ – click the Show Original button, press Control ⌃ + C on your keyboard, or force click the canvas.
To reset all Color Adjustments, click Reset at the bottom of the Color Adjustments pane.
Resources
5 Answers 5
Sorted by: Reset to default
Eventually it will be, using shaders. See the W3C Docs on Filters.
At the moment, what is possible for instance is:
-webkit-filter: grayscale; /*sepia, hue-rotate, invert. */ -webkit-filter: brightness(50%); See
- David Walsh on CSS Filters
- Stackoverflow: apply a rose tint. :
- W3C Filter Effects 1.0 Docs – 38.2.5. Other uniform variables: the CSS shaders parameters
Update:
Adobe released its HTML5 based CSS Filter Labs with support for custom filters (Shaders) on supported browsers:
Follow
1 1 1 silver badge
answered Sep 22, 2012 at 18:28
Lorenz Lo Sauer Lorenz Lo Sauer
23.8k 16 16 gold badges 86 86 silver badges 87 87 bronze badges
shaders have been deprecated – get used to doing this with filters!
Sep 13, 2015 at 7:29
While there are no stand alone tint filter you can make kind of one by composition of existing filters without shading.
Combine sepia to unify the color, then hue-rotate to the color you want it to be tinted with
-webkit-filter: sepia(90%) hue-rotate(90deg); I use borders with an alpha value for my tints, its really an overlay but doesn’t use any extra DOM elements making the transition to sepia+hue-rotate simpler when the other browsers get those filters.
