Make Beautiful Gradients

1. Scrawl-canvas

   1 40 335 9.0 JavaScript

   Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun

   

   Just before Christmas I got an urge to add a dither filter to my JS canvas library. The past few weeks have certainly been a very intense adventure through a very deep rabbit hole involving color spaces, color distances and discovering how to generate a best-fit reduced palette of colors and then dither it (hello, blue noise!)

   I finally managed to complete the work last week and I'm quite happy with the results. Using the library people can set the colors of graphical objects or gradients using any CSS color space string (RGB, HSL, HWB, LAB, LCH) and the color should render as expected. The reduce-noise filter uses LAB internally to calculate color distances, but in the end I compromised and used euler distances for the algorithm rather than one of the more modern algorithms.

   Work is still on a branch in the library[1] but I'm hoping to merge it into the main code in the next week or so (after testing across devices/screens/etc).

   Aside: Safari has gone ahead and introduced support for HWB, LAB and LCH color strings in CSS. Sadly, they're not recognised by Safari's canvas engine (yet). Also, their HSL and HWB gradients seem to be the same as the RGB gradients; their LAB/LCH gradients seem to dodge the dreaded Gray Zone.

   [1] - https://github.com/KaliedaRik/Scrawl-canvas/tree/dec-21-dith...

2. SaaSHub

   www.saashub.com featured

   SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

   

3. csswg-drafts

   2 74 4,565 9.9 Bikeshed

   CSS Working Group Editor Drafts

   

   As the article says, the core problem is CSS interpolates in RGB colorspace. CSS Color 4 seems to have adapted a color space parameter for interpolation in its drafts. See discussion here: https://github.com/w3c/csswg-drafts/issues/5833

4. hsluv

   3 14 1,287 4.1 Mustache

   Human-friendly HSL, website and math

   

   > Now, HSL isn't necessarily the best color mode to use in every situation; it tends to produce gradients that can be overly bright and vivid, because it doesn't take into account human perception.

   Shout-out to to [HSLUV](https://www.hsluv.org/) which does exactly that.

5. palettize

   4 1 2 3.7 C++

   Palette generator using k-means clustering with CIELAB colors

Suggest a related project