Colour Theory and HSV Contrast
February 13, 2008 10:50 AM Subscribe
Colour Theory: I have an ActionScript 3 project that has models that wear changeable clothing, where the style and colour of the clothing can change. The clothing is composed of several layers (colour, border, details) and there are preset colours for the 'colour' layer. When the colour layer changes I need to automatically calculate a contrasting colour for the border layer. I know this involves the HSV colour space but I'm struggling to get good results.
The mechanic is simple, click to change the clothing on the model. Each item of clothing is composed of several layers:
- colour, the main shape of the piece of clothing
- border, the outline of the element, showing folds, creases, seams, etc
- details, extra elements like buttons, zippers, etc
There are a set of predefined colours for the colour layer so changing the colour of the clothing should result in changing the colour of the border. By default the border is a dark colour, somewhere between black and white. If the clothing changes to a light colour, the dark border works fine. If the clothing is changed to a dark colour the border then blends in with the colour and looks terrible, the clothing just looks like a dark blob.
The solution is to pick a contrasting, neutral colour for the border layer. I've tried to do this by converting the colour to HSV values then picking a colour where h=0, s=0, v=(255 - current v). This should give a contrast but it results in mostly greys.
Is there a better way to programatically calculate a good, contrasting black/white shade for the border? I have written a class that converts freely between HSV, RGB and Hex so I can work in any of those colour spaces. I think HSV is the best one to work with but I'm struggling with the logic of how to alter the S and V values to get a good contrast.
The mechanic is simple, click to change the clothing on the model. Each item of clothing is composed of several layers:
- colour, the main shape of the piece of clothing
- border, the outline of the element, showing folds, creases, seams, etc
- details, extra elements like buttons, zippers, etc
There are a set of predefined colours for the colour layer so changing the colour of the clothing should result in changing the colour of the border. By default the border is a dark colour, somewhere between black and white. If the clothing changes to a light colour, the dark border works fine. If the clothing is changed to a dark colour the border then blends in with the colour and looks terrible, the clothing just looks like a dark blob.
The solution is to pick a contrasting, neutral colour for the border layer. I've tried to do this by converting the colour to HSV values then picking a colour where h=0, s=0, v=(255 - current v). This should give a contrast but it results in mostly greys.
Is there a better way to programatically calculate a good, contrasting black/white shade for the border? I have written a class that converts freely between HSV, RGB and Hex so I can work in any of those colour spaces. I think HSV is the best one to work with but I'm struggling with the logic of how to alter the S and V values to get a good contrast.
Best answer: The easy answer:
For V = 0 - 80, border color = white
For V = 80-255, border color = black
If you wanted to tweak it up, you could throw in the same hue, decrease the saturation by a given percentage (say, -20%), and instead of going with straight black or straight white you could say,
(strictly for V)
For V = 0 - 80, border color = 175 + V
For V = 80-255, border color = 255 - .5V (or .25V, etc.)
You can play around with where you split the colors, but I'd split it further towards the darker end of the spectrum.
But if you really really wanted to throw color theory in there, you could try bringing the hue closer to purple/blue/a cooler color.
Good luck. :)
posted by reebear at 12:20 PM on February 13, 2008
For V = 0 - 80, border color = white
For V = 80-255, border color = black
If you wanted to tweak it up, you could throw in the same hue, decrease the saturation by a given percentage (say, -20%), and instead of going with straight black or straight white you could say,
(strictly for V)
For V = 0 - 80, border color = 175 + V
For V = 80-255, border color = 255 - .5V (or .25V, etc.)
You can play around with where you split the colors, but I'd split it further towards the darker end of the spectrum.
But if you really really wanted to throw color theory in there, you could try bringing the hue closer to purple/blue/a cooler color.
Good luck. :)
posted by reebear at 12:20 PM on February 13, 2008
This thread is closed to new comments.
http://ask.metafilter.com/27289/color-me
posted by miniape at 12:03 PM on February 13, 2008