Color Scheme Generator

This color scheme generator generates color schemes for your website or application. Eventually also for mobile apps. Just push the button and you will get an generated color scheme, even directly downloadable for bootstrap (sass), foundation or plain css (coming soon). Click 'gimme scheme' for a random scheme, or enter your base-hex-value to generate a scheme semi-random based on your color.

Et voilà: your generated website color scheme. ↻ Generate new color scheme

Your generated color scheme

 

Save colors an color schemes by creating a free account or by logging in. You can click on colors above to get more information about them.

Color Scheme Generator - how it's made

This colorscheme generator was developed with the help of UX/UI Designers and Creative Developers. Firstly, we had to deeply understand the magic behind a harmonic color scheme. And as always, there are a lot of ways how it can be done. Since we need some color inspiration here and then ourselves, we put the user hat on and worked on something, that would generate a bunch of ideas in no time, without the need of a big setup process. Our goal was to find a solution which generates appealing color scheme ideas, but we never had the goal of designing a complete solution which takes tones of parameters, because that already would not make sense anymore as an idea generator. Our final solution is a color scheme generating algorithm which starts off a single color. Once this single color is determined (randomly), the color scheme generator starts selecting matching colors in the following order: it determines the complementary color first and then calculates the complementary color lightened by 25 percent (through the HSL wheel). Although we had several other color generating algorithms under test, this one gave the best percentage of useful results, averaging around 78% of color schemes which our users considered 'usable as an inspiration'. Thank you for your time.

Coming soon...

  • Choose your base color
  • Web-App color scheme example
  • Alternate color algorithms
  • CSS Export