wtf is open-color?

Open Color is a pre-made palette of colors designed to help you build websites and apps that look good and work for everyone. Instead of picking colors randomly or spending time debating which shade of blue to use, you get a thoughtfully designed set of colors ready to drop into your project. The palette includes gray plus twelve other colors (red, teal, indigo, and so on), and each color comes in ten different brightness levels, numbered 0 through 9. So if you want a light teal background, you'd use one number, for a dark teal text, you'd use a different number from the same color family. The key benefit is consistency: once you're using Open Color, your whole interface uses colors that work together by design. What makes this palette special is that it's been tested to look good for people with color blindness. Specifically, it works well for people with deuteranopia and protanopia (the two most common types of red-green color blindness), so your app or website will be readable and pleasant for a wider audience out of the box. To use it, you install it into your project via npm, then import it into your CSS or SCSS/SASS/LESS files. Once imported, you reference colors by name, like $oc-gray-7 or @oc-teal-3, instead of typing hex codes. This makes your code cleaner and easier to update later. The authors do note that they may refine these colors in the future, so it's best used as a working palette rather than as your brand's permanent signature color.