manipulating hex values

[darrel]

(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]

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.AllowHexSpecifier);
g = Int32.Parse(color.Substring(3, 2),
System.Globalization.NumberStyles.AllowHexSpecifier);
b = Int32.Parse(color.Substring(5, 2),
System.Globalization.NumberStyles.AllowHexSpecifier);

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]

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]

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]

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.AllowHexSpecifier)
g = Int32.Parse(siteColor1.Substring(2, 2),
System.Globalization.NumberStyles.AllowHexSpecifier)
b = Int32.Parse(siteColor1.Substring(4, 2),
System.Globalization.NumberStyles.AllowHexSpecifier)

'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]

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.