This is a tints and shades generator inspired by the Shadowlord tints and shades generator website.
My site differs in that you can't pick a base color; you can only generate a random color and tints and shades are created based on that random color.
This project was bootstrapped with Create React App.
In the project directory, you can run npm start which runs the app in development mode.
Open http://localhost:3000 to view it in your browser.
Click the color wheel button to generate a random color and the corresponding tints and shades.
Click the copy button to copy the generated colors to the clipboard. You can then paste these values into your project as global variables like so:
--primary-100: #f7b298;
--primary-200: #f6a586;
--primary-300: #f59671;
--primary-400: #f48459;
--primary-500: #f15c22;
--primary-600: #d8521e;
--primary-700: #c2491b;
--primary-800: #ae4118;
--primary-900: #9c3a15;I created a calculateLuminance function that calculates the relative luminance of each color. We can then dynamically set the font color to be white or black, depending on which offers the best contrast ratio with the background.
I calculate relative luminance for the sRGB colorspace as set out in WCAG 2.x
- migrate to Vite from CRA perchance?