Reasonable Colors

Reasonable Colors is a free, open-source color system that provides 24 uniformly spaced color sets, each with six numbered shades. It gives designers and developers a ready-made palette of CSS variables to use in their projects, available in hex, HSL, RGB, and future-proof LCH color formats. The system is designed to be dropped directly into any website or application via a simple CSS link or npm install.

The tool's standout feature is its built-in accessibility. The system is mathematically structured so that the contrast between any two shades can be predicted by the difference in their shade numbers. A difference of 2 guarantees a contrast ratio of at least 3:1, a difference of 3 guarantees 4.5:1, and a difference of 4 guarantees 7:1. This rule works across all colors, including gray, making it simple to create combinations that meet WCAG 2 AA and AAA guidelines for text and graphics.

This tool is a major benefit for web developers, UI/UX designers, and product teams who need to build accessible interfaces quickly without guesswork. It's perfect for creating design systems, prototyping new applications, or ensuring an existing project meets accessibility standards. It removes the friction of manually checking color contrast for every new UI element.