Velocity Reviews > manipulating hex values

# manipulating hex values

darrel
Guest
Posts: n/a

 03-01-2006
(apologies if I've asked this before in here...I thought I had, but can't
seem to find my original post).

I'm trying to automate the process of picking some colors. I want to select
one color, then programtically generate some different values of the same
color...both lighter and darker.

I'd like to start and end with a hex value.

Can that be done in VB.net? It looks like I can, but the hex values I see in
examples don't quite match the typical hex notation of color values in CSS.

For instance, I'd like to take this:

#6699cc

Split it into 3 values (easy enough) and convert to a percentage value (not
sure on that step, but basically 'hex converted to base 10/255'):

66 = .4
99 = .6
cc = .8

Then do some math on each (like multiply by 1.2 to make a ligher color) and
then convert back to hex.

It looks like hex is a type of LONG, but I'm not exactly sure how to
translate between the two. Is ctype the answer?

-Darrel

Kevin Spencer
Guest
Posts: n/a

 03-02-2006
Hi darrell,

Use the Int32.Parse(String, System.Globalization.NumberStyles) overload to
parse the string, and perform math on it. Then use the
Int32.ToString(String) method to translate it back. Example:

string color = "#6699cc";
int r, g, b;
double rr, gg, bb;

// Parse string to Int32 values
r = Int32.Parse(color.Substring(1, 2),
System.Globalization.NumberStyles.AllowHexSpecifie r);
g = Int32.Parse(color.Substring(3, 2),
System.Globalization.NumberStyles.AllowHexSpecifie r);
b = Int32.Parse(color.Substring(5, 2),
System.Globalization.NumberStyles.AllowHexSpecifie r);

rr = (double)r/255D;
gg = (double)g/255D;
bb = (double)b/255D;

// perform some math on the percentages, then convert back

r = (int)(rr * 255D);
g = (int)(gg * 255D);
b = (int)(bb * 255D);

color = "#" + r.ToString("X2") + g.ToString("X2") + b.ToString("X2");

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
A brute awe as you,
a Metallic hag entity, eat us.

"darrel" <> wrote in message
news:%23%...
> (apologies if I've asked this before in here...I thought I had, but can't
> seem to find my original post).
>
> I'm trying to automate the process of picking some colors. I want to
> select one color, then programtically generate some different values of
> the same color...both lighter and darker.
>
> I'd like to start and end with a hex value.
>
> Can that be done in VB.net? It looks like I can, but the hex values I see
> in examples don't quite match the typical hex notation of color values in
> CSS.
>
> For instance, I'd like to take this:
>
> #6699cc
>
> Split it into 3 values (easy enough) and convert to a percentage value
> (not sure on that step, but basically 'hex converted to base 10/255'):
>
> 66 = .4
> 99 = .6
> cc = .8
>
> Then do some math on each (like multiply by 1.2 to make a ligher color)
> and then convert back to hex.
>
> It looks like hex is a type of LONG, but I'm not exactly sure how to
> translate between the two. Is ctype the answer?
>
> -Darrel
>
>
>

darrel
Guest
Posts: n/a

 03-02-2006
> Use the Int32.Parse(String, System.Globalization.NumberStyles) overload to
> parse the string, and perform math on it. Then use the
> Int32.ToString(String) method to translate it back. Example:

Kevin:

Excellent! That worked wonderfully.

Alas, I'm finding that subtle color shifting really isn't best handled by
simple math. Looks like I'm going to want to adjust each shade differently
depending on the source file.

So, seemed great in concept, but not so great in practice.

However, I now have a nice script for future reference. Thanks!

-Darrel

Kevin Spencer
Guest
Posts: n/a

 03-02-2006
Hi Darrell,

Bob Powell has some nice code samples for modifying colors. Check out:
http://www.bobpowell.net/gdiplus_faq.htm

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
A brute awe as you,
a Metallic hag entity, eat us.

"darrel" <> wrote in message
news:Ot\$...
>> Use the Int32.Parse(String, System.Globalization.NumberStyles) overload
>> to parse the string, and perform math on it. Then use the
>> Int32.ToString(String) method to translate it back. Example:

>
> Kevin:
>
> Excellent! That worked wonderfully.
>
> Alas, I'm finding that subtle color shifting really isn't best handled by
> simple math. Looks like I'm going to want to adjust each shade differently
> depending on the source file.
>
> So, seemed great in concept, but not so great in practice.
>
> However, I now have a nice script for future reference. Thanks!
>
> -Darrel
>

darrel
Guest
Posts: n/a

 03-03-2006
> Bob Powell has some nice code samples for modifying colors. Check out:
> http://www.bobpowell.net/gdiplus_faq.htm

Thanks, Kevin.

I actually got things working based on your sample. The issue was that I was
incrementing each color channel equally, when I really needed to increase
(or decrease) each channel using an equal percentage.

Here's what I ended up with:

=====================================
'this particular example creates 3 value variations from one initial color
input

dim siteColor1 as string = "cd7f32"
dim siteColor2 as string
dim siteColor3 as string
dim siteColor4 as string

Dim loopCount As Integer

'for the original hex values
Dim r As Integer
Dim g As Integer
Dim b As Integer

'for the converted to decimal values (one for each color variation)
Dim rr(3) As Double
Dim gg(3) As Double
Dim bb(3) As Double

' Parse string to Int32 values
r = Int32.Parse(siteColor1.Substring(0, 2),
System.Globalization.NumberStyles.AllowHexSpecifie r)
g = Int32.Parse(siteColor1.Substring(2, 2),
System.Globalization.NumberStyles.AllowHexSpecifie r)
b = Int32.Parse(siteColor1.Substring(4, 2),
System.Globalization.NumberStyles.AllowHexSpecifie r)

'convert to decimal
loopCount = 0
While loopCount < 4
rr(loopCount) = CType(r, Double) / 255D
gg(loopCount) = CType(g, Double) / 255D
bb(loopCount) = CType(b, Double) / 255D
loopCount = loopCount + 1
End While

'now the colors are in decimal format
Dim colorMultiplier(3) As Decimal

'lighten or darken each color.
'positive decimals up to 1 = ligher (0-100%)
'negative numbers down to -1 = darker (0-100%)

colorMultiplier(0) = 0
colorMultiplier(1) = .7
colorMultiplier(2) = .6
colorMultiplier(3) = -.8

'multiply everything
loopCount = 0
While loopCount < 4
If colorMultiplier(loopCount) > 0 Then
'lighten color
rr(loopCount) = rr(loopCount) + ((1 - rr(loopCount)) *
colorMultiplier(loopCount))
gg(loopCount) = gg(loopCount) + ((1 - gg(loopCount)) *
colorMultiplier(loopCount))
bb(loopCount) = bb(loopCount) + ((1 - bb(loopCount)) *
colorMultiplier(loopCount))
ElseIf colorMultiplier(loopCount) < 0 Then
'darken color
rr(loopCount) = rr(loopCount) + (rr(loopCount) *
colorMultiplier(loopCount))
gg(loopCount) = gg(loopCount) + (gg(loopCount) *
colorMultiplier(loopCount))
bb(loopCount) = bb(loopCount) + (bb(loopCount) *
colorMultiplier(loopCount))
Else
'do nothing, as multiplier = 0 which means keep color as-is.
End If
loopCount = loopCount + 1
End While

'convert back to hex and create the color variables
r = CType(rr(1) * 255D, Integer)
g = CType(gg(1) * 255D, Integer)
b = CType(bb(1) * 255D, Integer)
siteColor2 = r.ToString("X2") + g.ToString("X2") + b.ToString("X2")

r = CType(rr(2) * 255D, Integer)
g = CType(gg(2) * 255D, Integer)
b = CType(bb(2) * 255D, Integer)
siteColor3 = r.ToString("X2") + g.ToString("X2") + b.ToString("X2")

r = CType(rr(3) * 255D, Integer)
g = CType(gg(3) * 255D, Integer)
b = CType(bb(3) * 255D, Integer)
siteColor4 = r.ToString("X2") + g.ToString("X2") + b.ToString("X2")
=====================================

Thanks for the help!

-Darrel

Kevin Spencer
Guest
Posts: n/a

 03-03-2006
> I actually got things working based on your sample. The issue was that I
> was incrementing each color channel equally, when I really needed to
> increase (or decrease) each channel using an equal percentage.

Yup. I believe Bob Powell talks about the difference in luminosity of the 3
values. At least I read it somewhere....

Great work, darrel!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer

Presuming that God is "only an idea" -
Ideas exist.
Therefore, God exists.

"darrel" <> wrote in message
news:...
>> Bob Powell has some nice code samples for modifying colors. Check out:
>> http://www.bobpowell.net/gdiplus_faq.htm

>
> Thanks, Kevin.
>
> I actually got things working based on your sample. The issue was that I
> was incrementing each color channel equally, when I really needed to
> increase (or decrease) each channel using an equal percentage.
>
> Here's what I ended up with:
>
> =====================================
> 'this particular example creates 3 value variations from one initial color
> input
>
> dim siteColor1 as string = "cd7f32"
> dim siteColor2 as string
> dim siteColor3 as string
> dim siteColor4 as string
>
> Dim loopCount As Integer
>
> 'for the original hex values
> Dim r As Integer
> Dim g As Integer
> Dim b As Integer
>
> 'for the converted to decimal values (one for each color variation)
> Dim rr(3) As Double
> Dim gg(3) As Double
> Dim bb(3) As Double
>
> ' Parse string to Int32 values
> r = Int32.Parse(siteColor1.Substring(0, 2),
> System.Globalization.NumberStyles.AllowHexSpecifie r)
> g = Int32.Parse(siteColor1.Substring(2, 2),
> System.Globalization.NumberStyles.AllowHexSpecifie r)
> b = Int32.Parse(siteColor1.Substring(4, 2),
> System.Globalization.NumberStyles.AllowHexSpecifie r)
>
> 'convert to decimal
> loopCount = 0
> While loopCount < 4
> rr(loopCount) = CType(r, Double) / 255D
> gg(loopCount) = CType(g, Double) / 255D
> bb(loopCount) = CType(b, Double) / 255D
> loopCount = loopCount + 1
> End While
>
> 'now the colors are in decimal format
> Dim colorMultiplier(3) As Decimal
>
> 'lighten or darken each color.
> 'positive decimals up to 1 = ligher (0-100%)
> 'negative numbers down to -1 = darker (0-100%)
>
> colorMultiplier(0) = 0
> colorMultiplier(1) = .7
> colorMultiplier(2) = .6
> colorMultiplier(3) = -.8
>
> 'multiply everything
> loopCount = 0
> While loopCount < 4
> If colorMultiplier(loopCount) > 0 Then
> 'lighten color
> rr(loopCount) = rr(loopCount) + ((1 - rr(loopCount)) *
> colorMultiplier(loopCount))
> gg(loopCount) = gg(loopCount) + ((1 - gg(loopCount)) *
> colorMultiplier(loopCount))
> bb(loopCount) = bb(loopCount) + ((1 - bb(loopCount)) *
> colorMultiplier(loopCount))
> ElseIf colorMultiplier(loopCount) < 0 Then
> 'darken color
> rr(loopCount) = rr(loopCount) + (rr(loopCount) *
> colorMultiplier(loopCount))
> gg(loopCount) = gg(loopCount) + (gg(loopCount) *
> colorMultiplier(loopCount))
> bb(loopCount) = bb(loopCount) + (bb(loopCount) *
> colorMultiplier(loopCount))
> Else
> 'do nothing, as multiplier = 0 which means keep color as-is.
> End If
> loopCount = loopCount + 1
> End While
>
> 'convert back to hex and create the color variables
> r = CType(rr(1) * 255D, Integer)
> g = CType(gg(1) * 255D, Integer)
> b = CType(bb(1) * 255D, Integer)
> siteColor2 = r.ToString("X2") + g.ToString("X2") + b.ToString("X2")
>
> r = CType(rr(2) * 255D, Integer)
> g = CType(gg(2) * 255D, Integer)
> b = CType(bb(2) * 255D, Integer)
> siteColor3 = r.ToString("X2") + g.ToString("X2") + b.ToString("X2")
>
> r = CType(rr(3) * 255D, Integer)
> g = CType(gg(3) * 255D, Integer)
> b = CType(bb(3) * 255D, Integer)
> siteColor4 = r.ToString("X2") + g.ToString("X2") + b.ToString("X2")
> =====================================
>
> Thanks for the help!
>
> -Darrel
>
>
>
>