Color Shades Generator
Input a color and return color shades in a 50 - 900 format, ready-to-use in CSS files, TailwindCSS, Chakra UI, and as a plaintext list
mediumpurple
| Red | 49% |
| Green | 47% |
| Blue | 81% |
Enter color value in any format (name, hex, RGB, HSL) or click the color box to select a color
How to Use Color Shades Generator
Use the input field to enter a color value. We support all color forms: hex, RGB, RGBA, HSL, HSV, and via color name (eg. gray).
Alternatively, click on the color box to open the color picker, and find a color that you like there!
Once selected, we'll automatically generate 10 shades based on that color. When you have what you like, check out the different code formatting tabs to easily copy and paste the shade pallette for use in your CSS files, or with frameworks like TailwindCSS.
Picking beautiful color shades is kind of an art itself, and some tradeoffs have to be made when creating an automated tool for it, but we hope it provides a great starting point that you can always tweak later.
Resources
This project was made with some wonderful resources from around the web:
Accio more magic tools
Color Converter
Convert color from any format to Hex, RGB, HSL, HSV, and more
Color Shades Generator
Generate shades for a color, ready-to-use for CSS, Tailwind, and more
Code Formatter
Format a code snippet into a readable form in JS, TS, HTML, and more
Hubbub Studios © 2023