Make beautiful color palettes for UI.
There are a lot of great color palette generators out there that give you four or five nice-looking colors that pair well together (I’ve included a list of my favorites at the end). When creating a color palette for user interfaces, though, that approach often does not work well.
If we look at some websites with strong color branding, we can see some commonalities.
We don’t see five different colors throughout the page. Instead, most of the page is actually made up of various shades of gray. Outside of images and illustrations, we typically only have one primary color: the brand color. Sometimes, a secondary accent color is used to highlight key elements, but it should be used sparingly.
Using too many colors is often distracting. Limiting your color palette to one primary color, one accent color, and a strong foundation of neutral tones can help your design feel consistent.
Goodpalette provides you with just that. Each color has nine shades that have been carefully picked to be used for text, backgrounds, wells, buttons, and more. You can also see how the color will look on different types of websites with the live mockups. It’s one thing to look at a selection of color swatches in isolation, but seeing it in the context of a real application is key.
You can also easily export your palette as an SVG or CSS/SCSS variables. (Tip: click Export SVG, and then paste directly into your design app like Figma or Sketch!)
Of course, no app will never be as good as a human with experience and an eye for design. I suggest using this as a starting-off point, and to spend some time editing the color palettes to be perfect.
To manually fine-tune your color palette, I recommend palettte.app by @gabdorf (I actually used this app to study the swatches I was generating and find improvements).
I hope you find Goodpalette useful! Feel free to reach out to me on Twitter, I would love to see what you make!
Articles about designing color palettes for UI:
https://gabrieladorf.com/palettteapp/
https://www.refactoringui.com/previews/building-your-color-palette
https://learnui.design/blog/color-in-ui-design-a-practical-framework.html
Non-UI color palette generators:
Other: