Discoveries #19 - Visual Helpers
Colors and images are the visual meat on the boil of any web solution. If you don’t convince the visitor’s eye, they will quickly leave and if users have to work with a visually poor solution, they will be too dissatisfied, no matter how well the algorithms work.
- Color Thief
- Vibrant Colors
- Qix color
- Alpha Paintlet
- DOM to Image
- Graphery SVG
Color Thiefby Lokesh Dhakar
Lokesh has developed a JS library which extracts a color palette from any given image. Very useful to adjust the colors of a page for example to the hero image. It works in the client as well as in Node.JS applications.
Vibrant Colorsby Corbin Crutchley et al
Corbin Crutchley is one of the maintainer of the library Color Vibrant, which extracts the colors from a given image as Color Thief does, but with many more features. It classifies the colors in the extracted palette for using as common shortcuts, it has a WebWorker for avoiding freezing the UI thread and it has converting methods into several color spaces. Stunning work … see the Pen from Konstantin Polunin.
Color.js - Let's get serious about colorby Lea Verou & Chris Lilley
As Lea Verou says in her blog post on releasing Color.js, there was a lack of color libraries that did the things she (and many others) needed on working with colors. So she teamed up with Chris Lilley, the father of SVG, to create a JS library that covers pretty much everything regarding color coding. I bet Color.js will become a new standard lib for all of us.
TinyColorby Brian Grinstead
Brian’s ambitions were certainly not the same as Lea Verou’s, but with TinyColors he has started something, that can be quite helpful on a smaller scale in converting from one color space to another.
Qix colorby Josh Junon
Josh Junon, or ‘Qix’ on Github, provides us a lib with only 496 lines and 10.9 KB, for immutable color conversion and manipulation with support for CSS color strings. For in between…
Alpha Paintletby Dave Rupert
The Web API
DOM to Imageby Anatolii Saienko
Ever wanted to store an arbitary DOM node as an image? With Anatolii’s solution a breeze. Just load the library and call
domtoimage.toPng(node). It supports PNG, JPEG and SVG.
imagesLoadedby David DeSandro
Sometimes it is important to know when an image was loaded on a website, for example to follow up with further actions. David has a Vanilla script and jQuery solution for this problem and it works with background images too. An important helper … well done.
Graphery SVGby -unknown-
Writing an SVG is not really an amusement. If you are more familiar with JS, you can use Vanilla JS with lots of
setAttribut or the wrapper solution from Graphery, which is chainable and very well documented.
Flickityby Evan S
Last but not least, a very cool hero image solution from Evan. It uses the parallax effect for sliding hero images in the background. Very cool.
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will be shown here as a Webmention, or by leaving a good old comment with your GitHub account.
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...