How do i Lighten & Darken an RGB color
chris jones
emboss things like borders and button edges on to a textured background.
Also it needs to be fairly fast so a reasonable aproximation would be ok. I
did think i could just add a fixed amount to each channel but im not sure if
that would look right.
thanks,
chris
Mikko 'memon' Mononen
You have a could of possibilities. One good idea would be to scale the
colors, or to mix them with predefined colors.
(assuming colors in range 0..1)
Scaling:
DarkerColor.r = 0.5 * Color.r
(same for rest of the components)
LighterColor.r = 1 - (0.5 * (1 - Color.r))
0.5 is the scaling amount, you could try different scale values as well.
Mixing:
alpha = mixing amount (start with 0.5 for example)
DarkerColor.r = alpha * Color.r + (1-alpha) * ShadowColor.r
LighterColor.r = alpha * Color.r + (1-alpha) * LightColor.r
ShadowColor could be for example RGB( 0, 0, 0 ) and
LightColor Could be RGB( 1, 1, 1 ), any colours will work :)
Hope this makes sense...
--memon
cos(pi),sin(pi) lddoW 6Jo'3p15u1@uow3w
uow3W uow3w~/6Jo'3p15u1'mmm
Just d' FAQs
Isn't this an image processing question? I'm *sure* this is an image
processing question. ;D
Well, that's true! But seriously, to darken an RGB color just multiply
it by a fraction. For example RGB=[250,250,250] is white, and half of
that, [125,125,125], is gray. Or [252,0,0] is bright red, and a fourth
of that, [63,0,0], is dark red.
Your proposal is quite similar if you substitute "mix" for "add". (If
you add anything you'll only make colors brighter.) For example, when
you mix 1/4 of bright red [252,0,0] with 3/4 of pure black [0,0,0] you
get the same dark red [63,0,0] as before. But in this scheme you could
also mix with dark gray [16,16,16] instead, and get a dark reddish
gray [85,12,12].
Simon
The only potential fly in the ointment being that RGB is (significantly)
perceptually non-linear.
Chris, Just d'FAQ's approach will work, but my give you confusing results
because if you scale two colours by the same amount, they may not *look* like
you have changed them the same result. So in your example, different colour
buttons may have different 'shading' effects after you process them.
If you are concerned about this, you can first map your RGB values to a space
like CIE L*C*h*, which is designed to be perceptually linear. Variations in L
will make the colour lighter/darker, while C* and h* represent chromaticity and
hue, respectively, and so allow you to change these values.
S.
Gernot Hoffmann
> >
> > Well, that's true! But seriously, to darken an RGB color just multiply
> > it by a fraction. For example RGB=[250,250,250] is white, and half of
> > that, [125,125,125], is gray. Or [252,0,0] is bright red, and a fourth
> > of that, [63,0,0], is dark red.
> >
> > Your proposal is quite similar if you substitute "mix" for "add". (If
> > you add anything you'll only make colors brighter.) For example, when
> > you mix 1/4 of bright red [252,0,0] with 3/4 of pure black [0,0,0] you
> > get the same dark red [63,0,0] as before. But in this scheme you could
> > also mix with dark gray [16,16,16] instead, and get a dark reddish
> > gray [85,12,12].
> >
> The only potential fly in the ointment being that RGB is (significantly)
> perceptually non-linear.
>
> Chris, Just d'FAQ's approach will work, but my give you confusing results
> because if you scale two colours by the same amount, they may not *look* like
> you have changed them the same result. So in your example, different colour
> buttons may have different 'shading' effects after you process them.
>
> If you are concerned about this, you can first map your RGB values to a space
> like CIE L*C*h*, which is designed to be perceptually linear. Variations in L
> will make the colour lighter/darker, while C* and h* represent chromaticity and
> hue, respectively, and so allow you to change these values.
>
> S.
Images are saved DISTORTED by a gamma law Y=X^(1/2.2), where X means
linear light space.
Without cancelling this distortion, linear manipulations on the light-
ness don´t produce the expected results (trivial cases like "make pure
red darker" excluded) - they will cause severe hue shifts.
Surprisingly, the best results are achieved for a partly correction
Z=Y^1.6 . After image manipulations in Z , the data have to be trans-
formed by Result=Z^(1/1.6), if 1.6 was used.
For manipulations in the normal range of image processing a transfor-
mation into CieLab or something equivalent is not required (highly
nonlinear, but applied forward and reverse). Very satisfying results
are achieved in a SMOOTH HLS coordinate system (opposed to Foley HLS):
http://www.fho-emden.de/~hoffmann/hlscone03052001.pdf
Best regards --Gernot Hoffmann
Gerry Quinn
>Just d' FAQs <nobod...@mac.com> writes:
>
>> On Mon, 16 Sep 2002 18:45:28 +0100, "chris jones" <fl...@clara.co.uk>
>> wrote:
>> >Hi, if i have an RGB color how do i make it lighter and darker? I need to
>> >emboss things like borders and button edges on to a textured background.
>> >Also it needs to be fairly fast so a reasonable aproximation would be ok. I
>> >did think i could just add a fixed amount to each channel but im not sure if
>
>perceptually non-linear.
>
>Chris, Just d'FAQ's approach will work, but my give you confusing results
>because if you scale two colours by the same amount, they may not *look* like
>you have changed them the same result. So in your example, different colour
>buttons may have different 'shading' effects after you process them.
I think you'll find that for button edges etc. a simple linear mixing
with black or white will look fine.
Gerry Quinn
--
http://bindweed.com
Entertainment software for Windows
Puzzles, Strategy Games, Kaleidoscope Screensaver
Download evaluation versions free - no time limits
Simon Alexander
My error --- of course I should have mentioned the assumption that gamma
correction is being performed if necessary. It is an important point you note,
that (most) image processing operations will not do what you expect if your
gamma is not corrected (and, in fact, don't make much sense). It is probably
also worth noting that while many images will have a gamma of 2.2 (or perhaps
you will end up in sRGB which is 'nominally' 2.2) when saved (dependant on your
application, of course) this is certainly not universal.
Your smooth HLS looks interesting, I will have to play around with it. Have any
proper observer studies been done with it? While HSV and hence HLS were
designed 'perceptually', in the sense that HSV was designed (as I understand it)
for interactive colour picking , neither are perceptually linear and so if
it is an algorithm picking the colours rather than a person, you can still run
into trouble, no? Are you suggesting that the CIE spaces (and the like) be
avoided for image processing? I should add a caveat
that while I have done a fair amount of image processing, the vast majority of
it has been on intensity images, not colour. I know enough about colour to
realise that it is a lot more difficult than it seems at first. Perhaps I
shouldn't even have brought it up?
Well, since I have, a couple of comments/questions. Of course the mapping
RGB <-> Lab is non-linear, but this will be true of *any* good approximation to
a perceptually linear space, since RGB is highly non-linear in perceptive
distance. This mapping also will involve assumptions about the observer, but
then any attempt at 'correct' colour treatment will. The non-linearity of these
mappings is no more a problem than the non-linear gamma mapping though, as you
are simply mapping into this space to perform your operations, and then back
out. It is also not expensive enough to worry about in most practical (non
realtime) applications.
However, it is possible that for many image processing tasks that this would be
overkill in practice; is this your experience?
S.
Simon Alexander
> In article <m3it15s...@thelonious.yi.org>, Simon <n...@spam.net> wrote:
> >Chris, Just d'FAQ's approach will work, but my give you confusing results
> >because if you scale two colours by the same amount, they may not *look* like
> >you have changed them the same result. So in your example, different colour
> >buttons may have different 'shading' effects after you process them.
>
> I think you'll find that for button edges etc. a simple linear mixing
> with black or white will look fine.
>
Hmmm... s/but my give you/but *may* give you/ and emphasize the may, i guess.
I suspect you are correct here, for the OP's application. I was just trying to
point out that scaling in RGB does not, in general, give the effect he
described. I probably just opened a can of worms though :)
S.
Just d' FAQs
>I suspect you are correct here, for the OP's application. I was just trying to
>point out that scaling in RGB does not, in general, give the effect he
>described. I probably just opened a can of worms though :)
I don't mind a few worms now and then. It's fascinating to see where
they crawl. (Though sometimes I fear the Original Poster's needs get
lost in the chase.)
chris jones
see whats looks ok,
chris
