Wether you are a designer or not, we all use color in our life for a document, presentation, and it can go to the extent of creating an entire UI.

Colors are pain in the ass. They are many and sometime it is very hard to get the right value — I’m talking to you yellow — if you don’t know what you’re doing. So here is a little trick to help you.

The first Rule is to use HSB or Hue Saturation Brightness as your color slider. It is a lot easier than the color wheel, square, and definitely easier than RGB.

If you are using a mac go to the second tab then choose HSB from the dropdown list.

Choose the color that you want from the hue and you finished 80% of the problem.

Next play with the saturation and brightness to get the right value, but be careful when you go higher than 90% and lower than 40%. Try to make a difference more than 10 points between either values. So if saturation is 66; go with 56 or 76 for brightness. If saturation is higher you will get darker colors, and if brightness is higher you will get more pale colors.

How to use this? Mix it up, use a pale background then switch values from being pale dominant to dark dominant and see if it blends while being readable. Once you get play with this a little you will get the idea.

As a practice try to open keynote for 5 minutes, add a title then play with the title and the background. See how each value looks like and see if it matches whats on your mind. After you finish exercise you will be a different person.

Many designers and non designers associate Flat with simple and Textured with Complex UI. Having flat UI doesn’t mean it is easy, and having complex UI with textures doesn’t mean it is hard, all it gets down to. It depends on how you organize your UI. Flat & Nonflat is just a preference.

Why Start Flat?

Flat is awesome for startups with small budget and tight schedule as they don’t take much effort to setup, and whether you are developing or other are implementing your design, it is a lot easier to just go with flat. That doesn’t mean you should use flat because of that, it means you should just be careful with every pixel you add, because it will add an overhead on you to maintain and you can easily confuse users with cramping UI and lots of glossy effects that have no good effect on the user.

Think of it as a mockup, build your whole UI in a flat sense use just rounder corners as buttons, put text without drop-shadow, build in a gray scale. Focus on IA first then move to typography and colors.

Only add when you need to

Does it work? Do people understand every UI element’s purpos? Do people understand that these are buttons and these are links? can they read the text or is it too small for them? If people understand everything, you are good to go, if not try adding more effects, making for example button in gradient, or making it 3D, maybe adding some dropshadow for small text that can be hard to read unless you add drop-shadow.

The process may seem tedious, but its important to understand every pixel you put, adding drop-shadows all over the place with Photoshop or CSS, doesn’t make you a good designer, understanding the reason behind adding those effects is what makes you a better designer.