What it does
Reasonable Colors is a free colour system with six shades per family. Its shade numbering links colour choices to minimum contrast ratios across the supplied families.
Choose two shade numbers far enough apart for the intended use. A gap of two gives at least 3:1 contrast, a gap of three gives 4.5:1, and a gap of four gives 7:1. These rules also work across different hue families and the greys.
The hue families sit 15 degrees apart on an LCH colour wheel. Individual colour pages suggest related combinations, while the shade numbers handle lightness separation.
Include the stylesheet or install reasonable-colors. Variables use the colour name and shade number, such as --color-magenta-2. Hex is the default representation, with HSL, RGB, LCH and corresponding SCSS files also supplied.
The published palette and code use MIT licensing.
Strengths
- Numbered contrast rules extend across different colour families.
Watch out for
- Each family contains six supplied shade levels.
Best for
- Developers selecting predictable foreground and background pairs
Sources
- Reasonable Colors palette and contrast guide (Oct 27, 2026)
- Reasonable Colors variables and formats (Oct 27, 2026)