Sort colors in a visually pleasing way.
npm install color-sorterSort 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!
``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
These examples can be seen on Project Wallace
where this package is used for sorting the colors.
!CSS Tricks color sort example
!Smashing Magazine color sort example
!Zurb Foundation color sort example
!Project Wallace color sort example
- 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