goodpalette

Make beautiful color palettes for UI.

How To Create a Beautiful Color Palette for your Website or App

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.

A screenshot of the AirBnb website.A screenshot of the DigitalOcean website.

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.

A screenshot of an example color palette.A screenshot of a mockup using the colors from the example palette.

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!

Resources

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:

https://coolors.co

https://colorhunt.co

Other:

https://accessiblepalette.com/

https://brandcolors.net

https://duotone.shapefactory.co/