colors

colors.css is a small CSS file that defines a set of named color values as ready-to-use utility classes for web pages. Instead of writing custom color values in hex codes every time you need to color something, you add a class name like .bg-blue or .navy to an HTML element and the color is applied for you. The palette covers 17 colors including navy, blue, aqua, teal, olive, green, lime, yellow, orange, red, fuchsia, purple, maroon, plus white, gray, silver, and black.

The library provides four types of classes for each color: background color classes (prefixed with .bg-), text color classes (no prefix), border color classes (prefixed with .border--), and fill and stroke classes for SVG graphics (prefixed with .fill- and .stroke-). This covers the most common cases where a developer would want to apply a consistent color in HTML and CSS without writing it by hand each time.

The entire file is only 903 bytes. It has no JavaScript, no build requirements for basic use, and no dependencies. You can link directly to the built CSS file in HTML, install it via npm, or copy and paste the relevant classes into an existing stylesheet. It is part of the Tachyons design system ecosystem, which follows a functional CSS approach where small single-purpose classes are composed to style elements.

The README notes that customizing the default color values is possible through a separate tool at components.ai, and links to several alternative open-source color systems based on different color models. The project is released under the MIT license.