next »

[dustin]

I have such a hard time using/choosing colors and was wondering if anyone has any advice for me.  I feel like it comes out most of the time in the UI as that's where we have static colors but really I think it's apparent everywhere.

So here's the general process for me...

1.  Go to some website with prebuilt palettes or that can generate palettes such as this...
http://colorschemedesigner.com/

2.  Start coloring in using the colors and get stuck because I feel like I don't have enough colors to work with.

Some examples

I'll be making a button and I'll want it to change for mouseOver and mouseDown so I figure I can just make it a bit lighter for over a bit darker for down but when I do the new colors don't go with the rest of the game.

I'll have a lot of different objects and I feel like they all look to similar when I'm only using a small amount of colors. Such as I'll add a heart in but there is no red in my palette yet so I'll just pick a new one out and it will look bad.

Basically pretty quickly I add more colors in to differentiate things and it starts to look worse and worse color wise.

So my question is how do I get away with only using a few key colors?

I mostly work with vectors but I assume the same theory applies to everything?

[MaloEspada]

I usually set similar values of saturation to the colors I use so in the end it ends up a bit consistent.

[gimymblert]

Don't think in color, think in HSL (hue saturation value/luminosity).

Start with luminosity/value.
Then apply color lay out
Fine tune with saturation to give it accent.

With photoshop/gimp i use blending layer and operate on those parameter, instead of choosing direct color.

[pen]

Don't think in color, think in HSL (hue saturation value/luminosity).

Start with luminosity/value.
Then apply color lay out
Fine tune with saturation to give it accent.

With photoshop/gimp i use blending layer and operate on those parameter, instead of choosing direct color.

This is a great way to work if you want fast results.

Totally relevant:

[Iamthejuggler]

I actually find that method (painting grayscale values then adding colour layers above) produces instantly recognisable results. I've seen some great stuff done done with it, but i always think they'd look better done more traditionally. Shadows aren't black or blacker versions of the main colour, and that method seems to teach people that they are.

[gimymblert]

That's true but the method is still valid. Shadow aren't "black" but good artist could still add different color/saturation in the darker area. I use a ramp instead of plain color (i duplicate the grayscale image and apply the ramp, then i blend it with the value layer).

Actually using photoshop, i extract color from reference to create a believable ramp (i create a layer with 100% rgb red above ref with saturation blending, i set the ref blending to color and under i use a 50% gray layer, saturation is extract separately to create saturation ramp).

This work great when trying to replicate hard to get skin tone (black skin tone as ex).

[pen]

I actually find that method (painting grayscale values then adding colour layers above) produces instantly recognisable results. I've seen some great stuff done done with it, but i always think they'd look better done more traditionally. Shadows aren't black or blacker versions of the main colour, and that method seems to teach people that they are.

I agree with you that we should all be careful not to use black/grey shadows. The technique does include adding colour through layers set to color. I usually start out with grayscale, then I add colour through a colorlayer. It's the part after that that's important: painting on top of all the other layers.

I also agree on that this is a method to get fast results, but unless you go apeshit with nice brushes afterwards you won't achieve that painterly feel.

 

[AndyKorth]

I run into the same sorts of issues the OP seems to have. I recently made a bunch of UI elements in a game, but wasn't really happy with the color choice. (especially accent colors for various parts on buttons, mouseovers, etc)

Don't think in color, think in HSL (hue saturation value/luminosity).

Start with luminosity/value.
Then apply color lay out
Fine tune with saturation to give it accent.

So let me see if I understand... You've got a color picker like this: http://kortham.net/temp/upshot_6qJtCFkJ.png and then you start by choosing a luminosity level appropriate for what you're working with, pick a hue, and then kind of mess with the bar on the saturation page? Or is that advice less applicable when you're not doing paintings with color overlays?

[team_q]

Using white and black isn't wrong, its just dingy, I think. People forget that when they are taught rules, you don't necessarily need to follow them, but you need to know what you are intentionally doing wrong, and why people will correct you if you don't have a good reason for doing it wrong.


My problem when designing buttons, I always design them with a basic state, a harsh Red and a harsh green, then I tell myself that's wrong, and try to find something more interesting. I don't know why I gravitate towards very green and very red.

[gimymblert]

I run into the same sorts of issues the OP seems to have. I recently made a bunch of UI elements in a game, but wasn't really happy with the color choice. (especially accent colors for various parts on buttons, mouseovers, etc)

Don't think in color, think in HSL (hue saturation value/luminosity).

Start with luminosity/value.
Then apply color lay out
Fine tune with saturation to give it accent.

So let me see if I understand... You've got a color picker like this: http://kortham.net/temp/upshot_6qJtCFkJ.png and then you start by choosing a luminosity level appropriate for what you're working with, pick a hue, and then kind of mess with the bar on the saturation page? Or is that advice less applicable when you're not doing paintings with color overlays?

You can do it that way

But it's more a composition advice (compose with value first, saturation last) than a color picking advice.

[Jo-o]

It's  a matter of felling you know when is good by making test...
I never trust methods or techniques...

(ps: I really enjoy the color names in my watercolor set)

[gimymblert]

Here is a beak down of th methodology. Bear in mind this a methodology for analysis and having a good readability.

Methodology is always a good start, especially where you are confuse. Instinct came for judging the result and adjusting things.

Here i take the pixel art of easyname from the mock up thread.
http://forums.tigsource.com/index.php?topic=7091.msg353945#msg353945
It's a simple yet well done color composition in term of readability. This would make it easier to understand the point.


Here is the original:


Here is the HSL break down:

In order: luminosity, color, saturation

You can see that even in each parameter the whole composition stay clear. This is a composition that take advantage of the full spectrum of contrast. Of course you don't have to, as long there is enough contrast to distinguish things and its visually appealing.

You don't need to work with this in individual layer like that. You can just start with value than add up things progressively like that:

Progessively added: luminosity, color, saturation

For example we can see that the background is a little high on saturation (the highlight of tree).



We can tone it down by adding grey, the result is less vibrant but more easy on the eyes, it reads better.


Of course it change the impression of the scene, it's all about you and what you want to achieve aesthetically. But at least you can make inform decision.

Or you could just use this to check after wise and make decision based on the analysis.

The more confident you get with the technique the faster and the more efficient you get result you want.

[AndyKorth]

That is very helpful, thank you, neoshaman!

[Gainsworthy]

My goodness. I was just today thinking about this. Mucking around with Toucan and everything. Think I might throw some more questions onto the heap, if that's okay.

But, firstly, Dustin! Amazing site you've linked to there. I'm-a gonna be using that.

Secondly, Neoshaman! That was a great post. I was reading Pixelation archives today, and whilst detailed, the level of expertise is daunting. You make it a rather simple sounding affair. I'm probably going to be referring back to it. Ina cargo cult kind of way.

You see, I don't understand this at a fundamental level. How do you pull apart that image into its three values? Why is saturation red? Is saturation good for important things, and bad for backgrounds?

To be succinct, how does one "think in HSL"?

[Inane]

You see, I don't understand this at a fundamental level. How do you pull apart that image into its three values? Why is saturation red? Is saturation good for important things, and bad for backgrounds?

Saturation is red because it's red. There's no reason. It could be conveyed as any color, really.
Saturation is good for important things because it makes them stick out more. Backgrounds don't have to be desaturated (nor do objects have to be bright), but as a general rule-of-thumb it's best if they're equal or lesser in saturation than important shit.

[gimymblert]

You see, I don't understand this at a fundamental level. How do you pull apart that image into its three values? Why is saturation red? Is saturation good for important things, and bad for backgrounds?

To be succinct, how does one "think in HSL"?

On a fundamental level the keys are:

Contrast (how much things differentiate themselves)
Readability (how fast you can recognize something apart)
Hierarchy (order of importance)
Easiness (stress put on the eye).

- Bad hierarchy, visual clutter and noise, too high contrast, confusing composition put stress on the eyes (generally anything too high energy). Its not only the color, but the general composition.
- Saturation is not in itself bad, only bad use of it. The rules of thumb is that important element are more saturate to make them stand out (understand an offset (enough contrast) from background element, not necessarily ultra vivid color)
- Saturation is represented in red because i thought its saturation contrast read better (easiness). It's red and not black and white because saturation is a color parameter.
- HSL vision is done through blending layer into photoshop or any graphical program that support theses blending mode (color, saturation and luminosity). The other way is training your eyes  

Assuming we are in RGB.
Photoshop, extracting HSL MAP

To obtain a luminosity map:
- Create a group folder name luminosity in which you will create subsequent layer.
- Create a layer and fill it with 50% gray (any gray actually because it's value will be replace, but 50 is standard).
- Create a layer with the image to extract the luminosity on top. Change the blending to luminosity. Color should disappear.

To obtain a color map:
- Create a group folder name color in which you will create subsequent layer.
- Create a layer and fill it with 50% gray (any gray actually because it's value will be replace, but 50 is standard).
- Create a layer with the image with the color to extract on top. Change the blending value to color, it should give wash out color barely readable (same luminosity > 50% level)
- On top create a new layer with the color red, fully saturate > FF0000 or r255.g000.b000 (R G B could work, R is standard). Change its blending value to saturation to make the color pop up.

To obtain a saturation map:
- Create a group folder name saturation in which you will create subsequent layer.
- Create a layer and fill it with fully saturate red.
- On top create a layer with the image in which you want to extract the saturation map. Turn its blending to saturation.

Extracting your HSL map:
- Create a group folder name HSL MAP in which you will create subsequent layer.
- Turn on the relevant layer and turn off the other one. Select the whole image (CRTL+A), then copy the result (SHIFT+CRTL+C) into a new layer (CRTL+V).
- Put the extracted layer into the folder

Combine HSL MAP back to original/composed image:
- Put the luminosity color first with no blend set, then the color with color blend set and on top saturation with saturation blend set.
- Modify directly the image result by tweaking the layer with brush. Or switch between visibility and blending normal to specifically see and alter one parameter.
- Whatever brush is used on saturation only modify the saturation. Whatever brush is used on color only modify color. Modifying color and saturation on luminosity layer don't change anything, the result get negate by layer on top, but be careful on luminosity setting of your brush.
- Best practice is to use low opacity brush (for exemple 10% increment) and layer up/down effect for contrast with brush stroke. The nuance on the contrst depend on the chosen increment.

Rules of thumb:
It's good to have at least 20% contrast value between important elements. Try to keep 3 (best) to 5 () contrasting value only in you composition. Keep all nuance within a contrast value pretty close, and keep a dead zone between nuance within two contrast value to keep them from blending (for exemple if your general luminosity contrast is gray 20% and gray 40%,  use nuance ranging from 10-20 and 30-40, leaving 10% non used value).

HSL has nothing to do with appeal and aesthetic, they are tools to understand how you do color and analyze your mistakes. You can also use it to analyze other's work.

[lpmaurice]

  We're not worthy.

Thanks neoshaman, all of this is very valuable AND very clear info, which is rare.  

[nikki]

HSL has nothing to do with appeal and aesthetic, they are tools to understand how you do color and analyze your mistakes. You can also use it to analyze other's work.

ive picked up this book , on a second-hand market.
Together with all the high value technical computer color theory i've read in this post it'be perfect. The book shows how colors work together, how they generate feelings and please (or don't (on purpose))

[gimymblert]

Good book! my absolute reference! 

[Jamie_D]

In terms of colour moods and feel, I usually try and have a screen grab of a film or image or something like that.

As for playing around with colours, I like to halve saturation levels to see what they are like; play around with colour overlays; duplicate the layer and mess around with the layer types and then get feedback on forums and from work friends.