Reasonable Colors is an open-source color system that makes it easy to build accessible, nice-looking color palettes.
Format for CSS variables: --color-COLORNAME-SHADE
Available values for COLORNAME: gray, rose, raspberry, red, orange, cinnamon, amber, yellow, lime, chartreuse, green, emerald, aquamarine, teal, cyan, powder, sky cerulean, azure, blue, indigo, violet, purple, magenta, pink
Available values for SHADE: 1, 2, 3, 4, 5, 6
Minimum contrast can be inferred by the difference between two SHADE numbers
- Difference of 2: (3:1)
- Difference of 3: (4.5:1)
- Difference of 4: (7:1)
reasonable-colors.css uses hex values. HSL, LCH, and RGB color spaces are available.
For .scss friendly variable declarations, FILENAME.scss for each color space are provided.
More information available at: https://www.reasonable.work/colors