This project is a color palette generator that creates multiple related colors from a single base color, helping with art and design. It generates a full 3×5 palette, allowing users to control the color difference of each row, and makes it easy to copy or share palettes for art and designs.
I built a web-based color palette generator that creates a full 3×5 palette from a single base color, with small hue and lightness shifts for more variation. Users can adjust how “different” the rows are, click any color to copy it to their clipboard in multiple formats, and share palettes using a URL that recreates the same colors. Users are also able to export their palette as a JSON, CSS, or PNG file. While making it, I learned a lot about color math (especially HSL), JavaScript event handling, and a lot more about website development. I had a lot of fun making this :)
Today I worked on improving my Color Palette Generator with a bunch of new features and design updates:
Copy format dropdown: Users can now choose whether to copy HEX, RGB, or HSL to their clipboard when clicking a color.
Click to copy with toast notification: When a color is clicked, a small pop-up appears telling users the color was copied and in which format.
Row Difference slider: Added a slider that changes how different the top and bottom rows are from the middle row. The slider updates the palette in real-time.
Better color card layout: HEX, RGB, and HSL values are now on separate lines in the bottom-left corner of each card, and the text color adjusts automatically so it’s always readable.
Fixed card sizing: The color boxes now stay the same size even when toggling features or resizing the page.
URL sharing: Users can now copy a special URL that will recreate the same palette for anyone who opens it.
Credits: Added a small credits section that always stays at the bottom of the page.
Button and control styling: Cleaned up buttons, sliders, and dropdowns so they match the overall design of the palette generator.
Everything now looks and feels more polished and has more features. I’m really happy with how it turned out!
Log in to leave a comment
This is my first devlog, and how I started this project :D
I started by making a simple webpage with a color picker so I could choose any base color for the palette to be based on. I focused on converting that color from HEX to RGB and then to HSL so I could manipulate it mathematically in JavaScript. I tried making a small palette at first by creating a palette of 5 colors by just changing the brightness, but it didn’t look very natural for art since everything was just darker or lighter. I didn’t like the limited palette, so I expanded it to 15 colors in total: 5 warmer shades, 5 base shades, and 5 cooler shades. I arranged the colors in 3 rows × 5 columns to look better.
After that, I worked on the color cards themselves. I made each card display the HSL, HEX, and RGB values, so it’s easy to reference while painting or designing. The palette works how I want it: you pick a color and can see 15 variations that you can use in any project. My next steps will be to add more features and to make the website more presentable and look better :D.
Log in to leave a comment