Common practice with showing a serie of logos in an attractive way in a webpage, is to present gray scaled – or monochrome versions, to neutralize the (potentially clashing) distracting colors from the images. One way of doing this could be to manipulate the full-color images in photo-editing software and save copies in gray scaled versions. An even quicker way would be to use css– or svg-filters.
With CSS-filters one is limited to the grayscale- or sepia filters, which will be sufficient in most use-cases. SVG filters are more powerful and have more options, while being more complex in a syntax which may have to be studied to be used well (in a more customized way).
Alternative approach with SVG
In this article I like to explore a different workflow, and suggest an alternative approach. It won’t be harder to accomplish but it will be more work, and harder to maintain. But it can be better suitable for let’s say a logo gallery for a graphic designer on a portpolio website, where demands on (the quality and appearance of) the images will be of more outspoken nature, because graphic designers are of a separate species; they have ink flowing through their veins.
Graphic designers are of a separate species; they have ink flowing through their veins
In using the
currentColor keyword in CSS combined with
opacity for logos we can get monochrome images in just one color but keep the possibility to have gradations in tonality, like it is done at Logomoon.
The flexibility of the CSS keyword
currentColor can be used here to our advantage;
currentColor picks up whatever value for color is set on – or is inherited by – the element in CSS, and behaves in that way like a variable. Whenever the color of the monochrome images needs to be changed, this can be done by editing just one value in the CSS.
<polygon opacity="0.56" fill="currentColor" data-color="#E44D26" data-opacity="0.56" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"/>
How this color-mode switching works in the demo: the default mode is monochrome, and the values for
fill are stored in custom data-attributes.
One trick to get the right values for opacity is to have another instance of your SVG image temporarily on the page, or a copy of the whole page, but now with using CSS-filter grayscale, like
-webkit-filter: grayscale(1);. When setting a
background-color: hsl(0,0%,0%) on the page and moving the last value for lightness up and down with the arrow keys of your keyboard within DevTools, in comparison to the grayness of the SVG-image, this will give you the right number, when you subtract it from 100.
- It seems
- Smarter SVG filters
- currentColor on CSS-tricks
- Keeping CSS short with currentColor
- Extending the Color Cascade
This article was also published on Codepen