This tool suggest a color by contrast ratio of least 7:1 between text and background. Since high contrast level will cause eye strain, this tool only suggest a color on contrast level between 7.1 to 7.5. (maybe future can be adjust by user)
(Current version only generate lighter color for chosen base color, in the future maybe add in complementary colors etc.)
Try out: https://admiring-northcutt-34c9e0.netlify.com
This project is for fun, experiment purposes and self shortcut use only, may not suitable for a professional web designer, if you're finding a professional color palette just search online you probably can get tons of it.
This repo using the following packages:
- TinyColor: https://github.com/bgrins/TinyColor
- Pickr: https://github.com/Simonwep/pickr
Inspired By:
- Pickr - An Awesome Color Picker for your next Project! by Gary Simons https://www.youtube.com/watch?v=RSbZJYVQmPU
- Kontrast WCAG Contrast Checker - https://www.getkontrast.com/