With Colors, you can overwrite the default color choices and use more suitable defaults for your layout. These colors fit together much easier and create less tension by diluting contrast.
For example, instead of
#000 for black, this library uses
#111 to keep the same level of darkness while removing some of the jarring contrast. This works much better for text and for backgrounds.
You can install Colors via npm or through GitHub by downloading the stylesheet directly.
Best of all, it comes with free swatches you can import into your design programs for easy access to the colors. The following swatch files are included:
If you design a lot of mockups with the default colors I absolutely recommend grabbing a copy of these swatches. You’ll be surprised how well these colors can fit into any layout.
Plus, Colors.css even has its own accessibility schemes where you’ll find 90 combinations of colors that meet the WCAG specs for quality accessibility. This is huge for anyone trying to support the widest audience possible and it’s great to see designers that care so much about modern UI/UX work.
But more importantly, it’s great to see so much progress in the open source community.
It’s funny looking back on old websites to see how much they’ve improved. And, the same can be said for general design trends, especially color choices and CSS libraries.
Read Also: Best Color Tools For Web Designers