Sort CSS colors by hue, then by saturation. Black-grey-white colors (colors with 0% saturation) are shifted to the end. Fully transparent colors are placed at the very end.
This sorting algorithm is very opinionated and might not fit your needs!
import { sortFn, sort } from "color-sorter";
var colors = ["#000", "red", "hsl(0, 10%, 60%)"];
var sorted = colors.sort(sortFn);
// Or:
// sorted = sort(colors)
// => sorted:
// [
// 'red',
// 'hsl(0, 10%, 60%)',
// '#000'
// ]Want to try it out?
These examples can be seen on Project Wallace where this package is used for sorting the colors.
- CSS Analyzer - Generate analysis for a string of CSS
- Wallace - CLI tool for @projectwallace/css-analyzer
- Constyble - A CSS complexity linter, based on css-analyzer. Don't let your CSS grow beyond the thresholds that you provide.
MIT © Bart Veneman