Colors.css Offers New Defaults for Colors on The Web

By . in Toolkit. Updated on .

Finding a great color scheme for your website is no easy task. But, it just got a lot easier with the Colors library by Adam Morse.

This free CSS library works off the original web colors that were deemed “web safe” and first released with HTML4 back in 1999. As you can imagine, the web has come a long way since then.

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.

Read Also: Using High Colour Contrast For More Accessible Design

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:

  • .aco (Photoshop)
  • .ase (Illustrator/XD)
  • .gpl (Gimp/Inkscape)

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.

Colors.css accessibility

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.

To learn more about the Colors library, visit the main page and check out the live examples. You can pull the .css file, along with all the swatch files directly from the GitHub repo, too.

Read Also: Best Color Tools For Web Designers

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail