color-sorter

!Color sorter

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!

Usage

``js
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

Examples

These examples can be seen on Project Wallace
where this package is used for sorting the colors.

$3

!CSS Tricks color sort example

$3

!Smashing Magazine color sort example

$3

!Bootstrap color sort example

$3

!Zurb Foundation color sort example

$3

!Project Wallace color sort example

Related projects

- 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.

License

MIT © Bart Veneman