I'm creating a gradient programmtically with HSB Colors. My Question is what kind of colors do fit good together in a gradient? Which of the Values H(ue), S(aturation), B(rightness) needs to variate?

  • 2
    You are basically asking 'what colors look good'? There's the subjective answer, which isn't a whole lot of help, and then there's the objective answer, which would require a whole lesson on color theory and still requires a large amount of context (and a helping of subjective opinion as well).
    – DA01
    Commented Sep 17, 2012 at 19:06

3 Answers 3


This question is insanely broad... But here's an overview of the key most relevant principles:

  • There are whole books on colour theory. You don't need all that depth though. Here's a great overview primer from our own Alan G, and I'd also recommend the excellent straight to the point double page spread in Universal Principles of Design (excellent book, can't recommend it highly enough). You can find more on colour theory in the answers to this question. tl;dr: vary any or all of them, it will depend on what you're trying to do. Seriously, almost anything can potentially work, from very subtle to dramatic, it all depends on context and intended purpose, so experiment.
  • Which leads me into why I think you are finding this hard - it sounds like you're approaching the problem upside down. You're building something that makes gradients, you're looking at the details of how the colours in gradients are implemented, thinking how do I turn these into great gradients? That approach seems alien to me as designer - looking at the HSL colour specification system for colour palette inspiration seems like trying to come up with a stylish new car chassis design by looking at the components of an internal combustion engine. Take a step back and take your engineer hat off, experiment with colours, work out what kind of gradients you want to implement keeping your mind free from implementation details and constraints - then put your engineer hat back on, look for patterns that will help you figure out how to implement the design. In any creative process, do the creative step first, analytic step second, and repeat. Decide what you are aiming for, then figure out how to get there. Then adapt and iterate as appropriate.
  • So your first concern is coming up with colour schemes. Any colours that look good together can also be made to look good in a gradient, and the details of how to adapt then will depend on what the gradients are for. As alluded to in the point about colour theory, it's one of those issues that is both an art and a science: it will always come down to a subjective personal call, but there are patterns that can be used as guidelines, and there are tools (adobe kuler is the most famous) that can aid the process and make automatic suggestions based on these principles. This had been raised here before - see Good resources for colour schemes? and the older question that question links to.

It depends, if you want to transform from one color into other than you need to change Hue. But in most case I like to play with Saturation and Brightness like you can see in most of the web 2.0 logos like Skype etc...

  • whats a good value differ for hue or saturation between the 2 colors?
    – arnoapp
    Commented Sep 17, 2012 at 14:33

I recently coded an online color gradient explorer, using HSL components, so perhaps you can use it to try some variations :


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.