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?

• Stackblitz example with ESM
• Stackblitz example with CommonJS

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